1

ナビゲーション項目に境界線を追加しようとしています。背景色は灰色で、枠線のうち 3 つは明るい灰色です。右側の境界は黒です。IE8 では、境界線は表示されません。

<li>IE9 で の外観は次のとおりです。ここに画像の説明を入力

IE8 での表示は次のとおりです。
ここに画像の説明を入力

そして、background-color属性を削除すると、IE8 に次のように表示されます。 ここに画像の説明を入力

背景色が境界線を覆い隠しているようです。どうすればこれを修正できますか?

HTMLは次のとおりです。

<ul class="mainMenu">
    <li></li>
    <li></li>
</ul>

そしてCSS：

.mainMenu > li{
    border: 1px solid black;
    position: relative;
    display: table-cell;
    background-color: #363636;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #666;
    background-image: linear-gradient(#363636 50%, #000 50%);
    background-image: -webkit-linear-gradient(#363636 50%, #000 50%); 
    background-image: -moz-linear-gradient(#363636 50%, #000 50%);
    background-image: -ms-linear-gradient(#363636 50%, #000 50%);
    background-image: -o-linear-gradient(#363636 50%, #000 50%);
}

EDITED:リスト項目を囲んでいるdivのではなく、間違って を持っていました。ulリスト項目が の IE8 ではul、この問題が発生します。

4

1 に答える 1

1

display: table-cell が原因です。ここで、表示方法について大きな疑問があります: table-cell の動作とその特異性のいくつか。ただし、素晴らしいフィドルの例を取り上げて「セル」に境界線を追加しても、同じ問題に苦しんでいることがわかります。

問題を解決したい場合は、float:left スタイルのレイアウトをお勧めします。次の行に沿って、境界線の重複の問題を処理できます。

.mainMenu {
   list-style-type :none;
   padding:0;
   margin:0;
}
.mainMenu > li {

    position: relative;
    float:left;
    background-color: #363636;
    border-top: 10px solid #666;

    border-right: 10px solid #666;
    border-bottom: 10px solid #666;
    /* There is also a background gradient */
}

.mainMenu > li:first-child {
  border-left: 10px solid #666;
}

見やすくするために、境界線のサイズを誇張しています。フィドル また、リスト項目の直後にフロートをクリアして、レイアウトに他の副作用がないことを確認することもできます。

于 2013-03-06T19:29:37.620 に答える