IE8背景色隐藏边框

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

这里是<li>看在IE9如何： enter image description here

这里是他们如何看待IE8：
enter image description here

当我删除background-color属性，这是在IE8中显示的内容： enter image description here

看起来背景颜色掩盖了边界。我怎样才能解决这个问题？

下面是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是围绕我的列表项。在IE8上使用ul中的列表项时，出现此问题。

来源

2013-03-06 dmr

好吧，我要大胆地猜测，你的html无效，LI应该在UL – 2013-03-06 18:54:22

Whoops-我在我的网页中使用了正确的HTML。我只是把它错误地复制到这个问题上。 – dmr 2013-03-06 18:56:00

.../*还有一个背景渐变* /你是什么意思？你的问题是不完整的上下文？如果您没有提供完整的.css和HTML上下文，则很难提供帮助。 – 2013-03-06 18:56:06

显示：表格单元是你的罪魁祸首。这里有一个great question关于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; 
}

我夸张的边框大小只是为了视觉清晰。 The Fiddle 您可能还需要确保在清单项目后不久清除浮动块，以确保它对布局没有任何其他副作用。

来源

2013-03-06 19:29:37 purgatory101

IE8背景色隐藏边框

回答

相关问题