元素之間的不穩定的差距

我正在爲一個朋友建立一個網站，它的形象很重，我把圖片分成了相關的部分，但我決定使用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是頭& Navline1 & Navline2之間的NavLine1 &之間產生2px的差距。這可以通過消除：

li {margin-top: -2px;}

在Firefox 3.6有代替頁眉& Navline1 &之間的間隙3PX只是NavLine1％之間的間隙爲2px 2. Navline

在IE8有代替2px的間隙Header和Navline1之間，但Navline1和Navline2之間有3px的間隔。

我有點困惑，究竟是什麼導致了這個，它是一個浮動錯誤？但任何人都可以解釋一下這個問題？

來源

2011-06-25 Uni

用途：

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

img元素inline與默認的baselinevertical-align。有問題的差距是爲像g或p這樣的字母爲下行者預留的空間。從baseline更改vertical-align消除了差距。

來源

2011-06-25 16:44:24 thirtydot

哦，那是什麼導致它。謝謝。 – Uni

@unillogical：如果我的回答解決了您的問題，您能接受嗎？謝謝。 – thirtydot

是的，抱歉花了這麼長時間，我花了很長時間休息一下。 – Uni

元素之間的不穩定的差距

回答

相關問題