css - IE8背景色隐藏边框

Question

我正在尝试为导航项添加边框。背景颜色为灰色，三个边框为浅灰色。右边框为黑色。在 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%);
}

已编辑：我错误地用 adiv而不是ul围绕我的列表项。在 IE8 中，列表项位于 中ul，会出现此问题。

Answer 1

display: table-cell 是你的罪魁祸首。这里有一个关于display: 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;
}

为了视觉清晰，我夸大了边框大小。小提琴 您可能还需要确保在列表项之后不久清除浮动，以确保它不会对您的布局产生任何其他副作用。