當過濾器漸變應用於單元格時，IE9中未顯示單元格邊框

我使用應用於標題行（即第一行）的CSS漸變創建網格列表。也有邊界應用。當過濾器漸變應用於單元格時，IE9中未顯示單元格邊框

在應用漸變過濾器之前，所有瀏覽器都顯示邊框，但在應用漸變過濾器後，IE會隱藏邊框！其他瀏覽器都可以。

CSS代碼如下：

.list tr.titlerow, .list .titlerow th { 
    border: 1px solid #a0a0a0; 
    height:25px; 
    padding:2px; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff');/*For IE7-8-9*/ 
    background: -moz-linear-gradient(top, #EBEBEB 0%, #fff 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(100%,#fff)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */ 
    background: -ms-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* IE10+ */ 
    background: -o-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */ 


}

任何人都可以請幫我解決這一問題？

來源

2012-03-07 user1199537

IE過濾器往往可以完全搞砸其他事情，沒有很好的理由。有時使用一個過濾器會殺死另一個過濾器 - 它們甚至不能很好地與對方玩，更不用說適當的CSS！

而不是使用過濾器，並嘗試正確的做事情，我會回落到基於圖像的漸變使用條件註釋或一些其他類似的機制。

來源

2012-03-07 09:58:28 danwellman

試試這個方法： -

.list tr.titlerow, .list .titlerow th 
    { 
     border: 1px solid #a0a0a0; 
     height:25px; 
     padding:2px; 
     background: -moz-linear-gradient(top, #EBEBEB 0%, #fff 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(100%,#fff)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */ 
     background: -ms-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* IE10+ */ 
     background: -o-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ 
*/ 
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff'); /* IE6 & IE7 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff')"; /* IE8 */ 

    }

來源

2012-03-07 09:59:27

你的意思是把過濾器定義在年底??? – 2013-07-23 05:04:22

只需添加位置：相對;

.container 
 
{ 
 
    display: table; 
 
    background-color: lightblue; 
 
    border-spacing: 5px 0; 
 
} 
 

 
.container > a 
 
{ 
 
    display: table-cell; 
 
    width: 60px; 
 
    height: 25px; 
 
    
 
    border-style: solid; 
 
    border-width: 1px; 
 
    
 
\t border-color:#adae9c; 
 
\t background: #e4e7dd; /* Old browsers */ 
 
\t background: -moz-linear-gradient(top, #fefefe 0%, #e4e7dd 100%); /* FF3.6+ */ 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e4e7dd)); /* Chrome,Safari4+ */ 
 
\t background: -webkit-linear-gradient(top, #fefefe 0%,#e4e7dd 100%); /* Chrome10+,Safari5.1+ */ 
 
\t background: -o-linear-gradient(top, #fefefe 0%,#e4e7dd 100%); /* Opera 11.10+ */ 
 
\t background: -ms-linear-gradient(top, #fefefe 0%,#e4e7dd 100%); /* IE10+ */ 
 
\t background: linear-gradient(to bottom, #fefefe 0%,#e4e7dd 100%); /* W3C */ 
 

 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe',endColorstr='#e4e7dd',GradientType=0); /* IE6-9 */ 
 
    /*get around bug with IE9 that won't render the border if combined with table-cell and using a filter*/ 
 
    position: relative; 
 
}

<div class='container'> 
 
    <a>test1</a> 
 
    <a>test2</a> 
 
</div>

來源

2015-08-27 13:56:56

當過濾器漸變應用於單元格時，IE9中未顯示單元格邊框

回答

相關問題