IE8背景颜色隐藏边框

Question

我正在尝试为导航项添加边框。背景颜色为灰色，三个边框为浅灰色。右边框是黑色的。在IE8上，没有任何边框显示。

以下是IE9中<li>的外观：

以下是他们对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%);
}

已编辑：我错误地在我的列表项周围有一个div而不是ul。在包含ul中的列表项的IE8上，会出现此问题。

Answer 1

显示：table-cell是你的罪魁祸首。这里有一个great question关于display：table-cell如何工作以及它的一些特性。然而，即使你拿出他们的小提琴例子并为他们的“细胞”添加边框，你会发现他们遇到了同样的问题。

如果你想解决你的问题，我会建议你去浮动：左边的风格布局。您可以使用以下内容处理边界重复问题：

.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;
}

为了清晰起见，我夸大了边框尺寸。 The Fiddle 您可能还需要确保在列表项之后不久清除浮动，以确保它对您的布局没有任何其他副作用。