Question

基本上在GunChester我的项目中，我在#login_top（顶部图像持有者）和下面的3个CSS列表之间有一些像素差距，＃login_left，＃login_centre和#login_right这样我的第一个问题为什么？我该如何解决这个问题，这是在FF，Chrome和IE中。其次，BG图像似乎覆盖了两倍，就像它在顶部拉伸一样，然后整个图像显示应该如此。我确实有它的工作，但是当我试图修复像素间隙时，我必须搞砸了什么，但不知道是什么，所以它现在变成了梨形状，在这两种情况下租赁帮助:)？

下面的Css：

 @charset "utf-8";
/*
    Autoher: Chris Leah
    Date: 20/04/2010
    (C) GunChester.net / Chris Leah

HTML and Body CSS */
html, body {
    background-image: url(../images/home/bg.png);
    background-repeat: repeat-x;
    background-color: #070a12;
    text-align: center; /* for IE */
    font-family: Verdana, Tahoma, Arial, sans-serif, Helvetica;

}

/*  Wrapper div */
#wrapper {

    margin: 0 auto;   /* align for good browsers */
    text-align: left; /* counter the body center */
    height: auto;
    width: 932px;
    margin-top:100px;
}
/*  Logo div inside wrapper div */
#wrapper #logo {
    position: relative;
    height: auto;
    width: auto;
    text-align: center;
}
/* Wrapper login top div */
#wrapper #login_top {
    position: relative;
    height: auto;
    width: auto;
    float: left;
}
/* Wrapper login left div */
#wrapper #login_left {
    float: left;
    width: 259px;
    position: relative;
}
/* Wrapper login centre div */
#wrapper #login_centre {
    height: 152px;
    width: 385px;
    float: left;
    background-color: #181F37;
    background-image: url(../images/home/login_area.png);
}
/* Wrapper login right div */
#wrapper #login_right {
    float: right;
    width: 277px;
    position: relative;
    margin-right: 11px;
}

以下页面的HTML ...

<!DOCTYPE html>
<html>
<head>
<!-- Meta Info -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Page title -->
<title>GunChester - Free Online Gangster RPG!</title>
<!-- Link in CSS and JS files -->
<link href="../css/home.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- Content wrapper div layer -->
<div id="wrapper">
  <!-- Logo div layer -->
  <div id="logo">
    <img src="../images/home/header.png" width="799" height="256" />
  </div>
  <!-- Login top image div layer -->
  <div id="login_top">
    <img src="../images/home/login_top.png" width="932" height="68" alt="Login Box Top Image" />
  </div>
  <div id="login_left">
    <img src="../images/home/login_left.png" width="259" height="152" alt="Login Left Image" />
  </div>
   <!-- Login centre div layer -->
  <div id="login_centre">
  test
  </div>
  <!-- Login right image div layer -->
  <div id="login_right">
    <img src="../images/home/login_right.png" width="277" height="152" alt="Login Right Image" />
  </div>
</div>
</body>
</html>

Answer 1

要解决第一个问题，请尝试。（刚刚使用FireBug进行测试）。

#login_top { height:68px; }

Answer 2

#login_top img {vertical-align:bottom;}

图片默认为vertical-align: baseline，为文字中的字母下划线（p，q，ect）留出空间。

Answer 3

顶部图像下方的空间是基线与图像所在文本行底部之间的距离。由于图像是内联元素，因此它们被视为文本。你可以通过简单地将图像作为块元素来解决这个问题：

#login_top img { display: block; }

您已在html元素和body元素上设置了背景图像。顶部图像下方的浮动元素不会影响正文的大小，因此正文元素仅覆盖页面的一部分。结果是，body元素重复了部分图像，但偏移了它的边距（以及包装器的边缘，因为它在body元素外部折叠）。从body元素中删除背景，以便只显示html元素。

XHTML / CSS问题与像素差距

3 个答案: