要素間の不規則な隙間

私は友人のためのウェブサイトを構築していますが、イメージがかなり重いので、イメージを適切なビットにスライスしましたが、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で2ピクセルギャップがNavline1 & Navline2間ヘッダ& NavLine1 &の間に作成されます。これによって解消することができる：Firefoxの3.6で

li {margin-top: -2px;}

NavLine1％の間だけ2ピクセルギャップヘッダ& Navline1 &間3pxギャップが代わりあるNavline 2.

IE8で2ピクセルギャップが代わりに存在しますヘッダーとNavline1の間に3pxのギャップがあります。

これを引き起こしていることは少し混乱しています。浮動小数点のバグですか？しかし、誰かが問題に光を当てることができますか？

出典

2011-06-25 Uni

用途：

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

img要素はデフォルトbaselineのvertical-alignとinlineです。問題のあるギャップは、gまたはpのような文字でデセンダのために予約されているスペースです。 vertical-alignをbaselineから変更すると、ギャップが削除されます。

出典

2011-06-25 16:44:24 thirtydot

これが原因です。ありがとうございました。 – Uni

@unillogical：私の答えがあなたの問題を解決したら、それを受け入れることができますか？ありがとう。 – thirtydot

申し訳ありませんが、とても長い時間がかかりました。私は非常に長い休憩を取った。 – Uni

答えて

関連する問題