元素之间的间隙不规则

问题描述

| 我正在为一个朋友建立一个网站，它的图像非常重，我将图像切成相关的部分，但是我决定使用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上，标头和Navline1之间有2px的间隙，但Navline1和Navline2之间有3px的间隙。我对造成这种情况的原因有些困惑，这是一个浮动错误吗？但是谁能在这个问题上阐明一些想法？

解决方法

采用：

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

img元素为inline，默认vertical-align为baseline。有问题的差距是为后缀保留的空间，例如g或p。从baseline改变vertical-align将消除间隙。

不规则元素元素元素间隙

元素之间的间隙不规则

问题描述

解决方法

相关问答