html - IE7 ぎこちないリストの間隔

Question

リストから構築された大きなメニューがあります。

私が試したすべての最新のブラウザーと IE8 で正しく表示されますが、IE7 では、リスト項目のサイズに応じてさまざまなサイズの大量のマージンがリスト項目に与えられているように見えます(以下の画像比較を参照)。

良いブラウザと IE7 の比較

残念ながら、IE7 のデバッグツールは最適とは言えず、問題の原因を突き止めるのに非常に苦労しています。ここにソースコードを投稿するには少し長いので、ご覧いただけるように JSfiddle を作成しました。

この謎の間隔がどこから来ているのか、誰にもわかりますか? どうすればそれを正すことができますか?

score 3 · Accepted Answer

IE7 では、<ul>タグはを継承line-height : 1.5emしており、ie7 で無効にすると、迷惑なスペースが削除されます。更新されたフィドル

この状態が犯人

ul {
    /* line-height: 1.5em; */
    list-style-position: outside;
}

追加

わかりました、白いギャップについてあなたが何を意味するかわかりました。これは (驚きの驚き) 迷惑な ie7 の「機能」の 1 つに見えます。ハックを使用して回避しました

ul li, ul li a {
    /* Needed in ie7 to stop list items expanding vertically
    *line-height:1.2em;
}

と

* html ul li a {
    height:15px;
}

また

ul#map > li > a.map-item {
    height:auto;
    *height:15px;
}

ハックに頼るのではなく、IE7 のみのスタイルシートを作成し、これを標準として宣言することをお勧めします。

score 1 · Accepted Answer

CSS を追加して、すべてのブラウザですべてのスタイルを同じにリセットしようとしましたか?

http://meyerweb.com/eric/tools/css/reset/などのリセット CSS ファイルを含めると、問題が解決する場合があります。

2 に答える 2