CSS - IE

Question

で正しく表示されないli要素私はIEでli要素をdisplyingに問題を抱えているが（8）、それはまさに私がFFで必要になります。

IEは、要素の底に4PXのマージンを置きます。ここにコードがあります。要素に-4pxのマージンを加えてマージンを取り除くことはできますが、それをFFで縮小します。

だから、基本的にIEは私のli太っになります。

#navigation ul { 
    width: 176px; 
    margin: 0px 1px 2px 0px; 
    padding: 0px 0px 0px 0px; 
    list-style: none; 
    -webkit-box-shadow: inset 0px 0px 4px 4px #000001; 
    -moz-box-shadow: inset 0px 0px 4px 4px #000001; 
    box-shadow: inset 0px 0px 4px 4px #000001; 
    border: 1px solid white; 
    -webkit-border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
    float: left; 
} 
#navigation li { 
    height: 30px; 
} 
#navigation li:hover { 
    background: none; 
    -webkit-box-shadow: inset 0px 0px 4px #000; 
    -moz-box-shadow: inset 0px 0px 4px #000; 
    box-shadow: inset 0px 0px 4px #000; 
} 
#navigation li:last-child { 
    -webkit-border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
} 
#navigation ul li a { 
    display: block; 
    padding: 8px 8px 8px 8px; 
    font: bold 12px Helvetica; 
    color: #444; 
    text-decoration: none; 
    border-bottom: 1px solid #999; 
    border-top: 1px solid #FFF; 
} 
#navigation ul li a:hover { 
color: blue; 
} 
#navigation ul li:first-child a { 
    border-top: none; 
} 
#navigation ul li:last-child a { 
    border-bottom: none; 
} 

li要素の背景のためのコード（それらの多く - それは、画像のパズルのようなものです）：

#c1l1 { background: url(img/new-1-0-0-0-01-02.png);} 
#c1l2 { background: url(img/new-1-0-0-0-01-03.png);} 

任意の提案ですか？

Answer 1

は<li>要素にdisplay: inline;を設定してください。ちょうどIEのために、もちろん（条件付きコメントを使用してください）。

Answer 2

//margin: -4px;

を追加しようと、私はあなたがブラウザのスタイルシートとそのスタイルの犠牲者だと思いますIE

Answer 3

すべてのバージョンのために働く必要があります。 ulとli要素の余白と余白を0にリセットすることをお勧めします。このリセットは他のスタイルを適用する前に行う必要があり、すべてのブラウザに一貫したレイアウトを適用する必要があります。

Answer 4

これらのいずれかを試してみてください。

1. float: leftリスト項目（および、その後も適用clear: leftまたはあなたがそれらを並べて整列表示されます）
2. が