ページの上部にナビゲーションバーがあります。FFとChromeでは、ナビゲーションバーが正常に表示されます。ただし、IE8(互換性の有無にかかわらず)では、ULは左側からインデントされているように見えます。各liは、li全体だけではありません。宣言しているにもかかわらず
text-align:center; width:600px; margin:auto; padding-left:0;
これを引き起こしている可能性のあるアイデアはありますか?
ページの上部にナビゲーションバーがあります。FFとChromeでは、ナビゲーションバーが正常に表示されます。ただし、IE8(互換性の有無にかかわらず)では、ULは左側からインデントされているように見えます。各liは、li全体だけではありません。宣言しているにもかかわらず
text-align:center; width:600px; margin:auto; padding-left:0;
これを引き起こしている可能性のあるアイデアはありますか?
margin-left:0px;
Firefox では、UL はデフォルトで左にパディングされますが、IE では左マージンがあります。
例:
<html>
<head>
<style>
ul{
border:1px solid red;
margin:0px;
list-style:none;
padding:0px;
}
li{
border:1px solid green;
margin:0px;
}
</style>
</head>
<body>
<ul>
<li>this</li>
<li>that</li>
<li>these</li>
<li>those</li>
</ul>
</body>
</html>
ul { list-style-position:outside; を使用しました。IE のインデントを修正します。
私はそれがあるべきだと思います:
ul { padding: 0; margin: 0 }
li { padding: 0; }
list-style-position:outside;
IE6/IE7専用に使用するとうまくいきました。ただし、これはlist-style-position:inside;
、他のブラウザーで使用していて、デフォルトのリストのマージン/パディングを 0 に設定して非表示にしている場合にのみ必要になる場合があることに注意してください。