我正在为一个 friend 建立一个网站，它的图像非常多，我已经将图像分割成相关的部分，但我决定使用 div 而不是使用表格。这就是我得到的:
HTML
<body>
<div id="container">
<div id="header">
<a href="index.html"><img src="images/header1280.jpg" /></a>
</div><!--end header-->
<div id="nav">
<ul>
<li><a href="#"><img src="images/mixes.jpg" /></a></li>
<li><a href="#"><img src="images/events.jpg" /></a></li>
<li><a href="#"><img src="images/artists.jpg" /></a></li>
<li><a href="#"><img src="images/christ.jpg" /></a></li>
<li><a href="#"><img src="images/links.jpg" /></a></li>
<li><a href="#"><img src="images/contact.jpg" /></a></li>
<li><a href="#"><img src="images/hos.jpg" /></a></li>
<li><a href="#"><img src="images/forum.jpg" /></a></li>
<li><a href="#"><img src="images/news.jpg" /></a></li>
<li><a href="#"><img src="images/fun.jpg" /></a></li>
<li><a href="#"><img src="images/shop.jpg" /></a></li>
<li><a href="#"><img src="images/join.jpg" /></a></li>
</ul>
</div><!--end nav-->
</div><!--end container-->
</body>
CSS
html, body, div, img, ul, li, a {
margin: 0;
padding: 0;
border: 0px none;
vertical-align: baseline;
font-size: 100%;
font: inherit;
}
body {
line-height: 1;
background: #000;
}
#container {
margin: 0 auto;
width: 1280px;
}
#header {
width: 100%;
}
#nav ul li a img {
width: 100%
height: auto;
}
#nav ul {
list-style: none;
width: 100%;
}
#nav ul li {
float: left;
}
现在总共有 12 个图像链接，它们跨越 2 行。所以想象一下你有这个:
标题
导航线 1
导航线 2
在 Chrome 上，标题和 NavLine1 之间以及 Navline1 和 Navline2 之间创建了 2px 的间隙。这可以通过以下方式消除:
li {margin-top: -2px;}
在 firefox 3.6 上，Header 和 Navline1 之间有 3px 的差距，而 NavLine1 % Navline 2 之间只有 2px 的差距。
在 IE8 上，Header 和 Navline1 之间有 2px 的间隙，但 Navline1 和 Navline2 之间有 3px 的间隙。
我有点困惑是什么原因造成的，是 float 错误吗？但是任何人都可以阐明这个问题吗？
最佳答案
使用:
#header img, #nav img {
vertical-align: top
}
img 元素是 inline，默认 vertical-align 为 baseline。有问题的间隙是为 g 或 p 等字母的后裔保留的空间。从 baseline 更改 vertical-align 可消除间隙。
关于html - 元素之间的不稳定间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6479057/