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背景色隱藏邊框

回答

相關問題