Question

我正在为一个朋友建立一个网站，它的图像非常重，我已将图像切成相关位，但我决定使用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行。所以想象你有这个：

HEADER
NAV LINE 1
NAV LINE 2

在Chrome上，在标题和＆amp;之间创建了2px的差距。 NavLine1＆amp; Navline1＆amp; Navline2。这可以通过以下方式消除：

li {margin-top: -2px;}

在Firefox 3.6上，Header和＆amp;之间存在3px的差距。 Navline1＆amp; NavLine1％Navline 2之间只有2px的差距。

在IE8上，Header和Navline1之间存在2px的差距，但Navline1和Navline2之间的差距为3px。

我对这导致什么感到困惑，这是一个漂浮虫吗？但是，任何人都可以对这个问题有所了解吗？

Answer 1

使用：

#header img, #nav img {
    vertical-align: top
}

img元素为inline，默认vertical-align为baseline。有问题的差距是为g或p等字母中的下行者保留的空间。从vertical-align更改baseline可消除差距。

元素之间的不稳定差距

1 个答案: