IEでさえパディングなし

Question

次のコードをtest.htmlに貼り付け、firefoxでブラウズしても問題ありません。でもIEでテキストを作成する方法：あなたがIEで閲覧した場合 しかし、あなたは<a>要素：

<style> 
li { 
    display:inline; 
    margin:0 90px; 
    padding:6px 12px; 
    background:#777777 none repeat scroll 0 0; 
} 



li a { 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
} 
</style> 


<div id="tabs"> 
    <div class="nav"> 
     <ul> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
     </ul> 
    </div> 
</div> 

EDITの右側に、より多くのスペースがあることがわかりますか？

Answer 1

：単一の行にすべてのあなたのliの要素を入れたり、それらをフロートしかし、これを試してみてください。

Answer 2

あなたのソースを見て、自分で試しました。

Firefox 3.0.11とInternet Explorer 8では、かなり同じページを表示していました。

私が言うことの1つは、ブラウザの幅が異なっていて、余白の問題がなかったためにページが最初とは異なって見えるということです。私の場合、ブラウザのサイズ変更はうまくいった。

しかし、問題はよくあることです。 Internet Explorerは、ほとんどの場合、通常は標準に準拠したブラウザとは異なるページを表示します。人々がこれを回避するために見つけた1つの方法（これはあなたの問題を非常にうまく解決するかもしれません）は、CSS Resetシートを使うことです。

いくつかの良いものは、次のとおりです。

• Eric Meyer's Reset CSS
• Yahoo! YUI Reset CSS

Answer 3

問題は、CSSボックスモデルは、パディングについて何をすべきかを決定する場所のようなブラウザ間の不幸な不一致です。

• IEは、div内のコンテンツのスペースを縮小します。埋め込みを増やすとdivのサイズが同じになるようにします
• Firefoxは、コンテンツのサイズを同じに保ちながら、埋め込みでdivサイズを増やします。

Answer 4

IE6でテストしたところ、アンカータグに余分なスペースが追加されているようです。コピーして貼り付けてください。 Firefoxは余分なスペースを追加しません。

必要に応じて、IEの余白を変更することができます。それは完璧な解決策ではありませんが、タブを似たように見せるのに役立ちます。すべてのブラウザで同じものにする必要がある場合は、代わりに画像を使用することができます。単にあなたの質問に答えるために

li a { 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
} 

*html li a { 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
margin-right:-3px; 
} 

*+html li a { 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
margin-right:-3px; 
}