當在IE8中應用css漸變過濾器時，表格單元格會丟失邊框

我發現在同一時間應用css漸變過濾器時，表格單元格上的css邊框會丟失。看起來漸變效果覆蓋了邊框。當在IE8中應用css漸變過濾器時，表格單元格會丟失邊框

這是一個瀏覽器錯誤還是我在這裏丟失了一些東西？

風格的定義是這樣的：

.c7 { 
    color: #000000; 
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0'); 
    border: #000000 1px solid; 
    width: 100px; 
    height: 30px; 
}

[更新]您可以應用不透明度濾光器，它減少從100到1，你可以看到邊界逐漸浮出水面。它證實了我的猜測，即梯度效應顯示在邊界之上。

來源

2010-08-12 Chris

很棒的發現。正如你所說，漸變覆蓋了邊框，因爲如果將邊框設置得更大，則漸變將擴展並覆蓋邊框。我搜索了一個解決方案，但沒有結果..希望有人知道一個把戲 – Sotiris 2010-08-12 09:28:07

+1感謝發佈這個 – 2010-12-23 16:46:25

我已經找到了解決，但你可能不喜歡它...

如果您在IE渲染quirks mode邊框呈現好的，如果你正在使用兼容模式它只是模糊。在IE8比較這兩個頁面：

還有什麼工作是單擊兼容性視圖按鈕，但我試圖與compatibility mode meta tags獲得相同的結果是不成功的。我試過使用box-sizing，但也沒有成功。我總結出讓它按照你想要的方式工作的唯一方法是強制IE進入怪異模式，但是這可能會爲佈局創建太多其他問題，以至於只需添加一個用於附加漸變背景的包裝元素即可。

來源

2010-08-12 11:24:03 robertc

我得到了同樣的結果，並沒有在IE8中聲明DOCTYPE。它有魔力嗎？ – BILL 2013-11-06 08:57:40

@Victor我不知道，你會得到什麼結果？ – robertc 2013-11-06 09:02:34

我得到帶有邊框的表格單元格，我注意到如果我在開發人員工具中使用設置了ie8模式的IE10，它沒有得到任何結果。爲了在IE中正確測試帶邊框的渲染單元格，我必須使用原始ie8而不設置瀏覽器模式。我得出的結論是IE9和IE8瀏覽器模式在IE9，IE10或IE11不一樣。 – BILL 2013-11-06 09:52:25

應用這也適用：

position: relative; 
z-index: -1;

來源

2010-12-12 23:51:07 frizz

這絕對會讓邊框顯示出來，但是（對我來說）清除了單元格內的所有內容;包括背景; – 2010-12-23 16:45:25

這對我有效，謝謝！ – Monica 2011-06-08 17:30:49

只是位置：相對;是我所需要的。 – eddiegroves 2011-09-06 06:19:17

使用DIV包含在每個單元格的內容。將漸變應用於DIV並將邊框放在單元格上。漸變將被限制在DIV中，並且不會覆蓋邊界。

http://jsfiddle.net/WWCaj/1/

來源

2012-07-20 13:44:31 Stormalong

這是正確的答案 – Omu 2012-09-27 22:07:45

同意。在IE8上唯一能夠解決背景和邊框問題的問題。 – Tukkan 2014-06-10 14:06:47

使用位置：相對！重要;

它的做工精細...

來源

2012-07-26 11:17:31

我發現我並不需要！重要的，儘管它也適用於此。還要注意，這需要應用於td而不是表格 – icc97 2013-03-29 16:47:31

對TD：

/* enough for IE9 */ 
    background-origin: padding-box; 
    background-clip: padding-box; 
    /* for IE8 */ 
    position: relative;

爲我工作。

也可能要與邊境崩潰嘗試爲這個錯誤的行爲不同

border-collapse: separate

和

border-collapse: collapse

來源

2013-04-04 14:41:08 user2245339

之間嘗試很多修正，我得出的結論後，它的根本不值得嘗試使用過濾CSS。一個quote from @mdo誰是Twitter的引導CSS背後：

過濾器是危險的企業在IE瀏覽器，尤其是7 & 8.我寧願不包括那些因爲它會是誰對他們用眼過度鄉親巨大的性能損失。

問題我打申請的CSS td元素：

的position: relative僅適用於IE9，IE8不
的z-index: -1不會對TD元素工作
如果你有一個過濾器然後你必須把它關閉懸停
我的表看起來更好有邊界比在表格單元格上的梯度

來源

2013-04-11 10:27:23 icc97

我試過所有這些解決方案都沒有成功。所以，我將梯度放在tr中，然後決定使用:: before僞元素並在其上設置邊框。但是，我甚至沒有爲僞元素添加邊框。以下就足夠了。

table thead { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0); 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0); 
} 
table th { 
    background: none; 
    border-right: 1px solid #a5a694; 
    background-clip: padding-box; 
    position: relative!important; 
    z-index: 100; 
} 
table th:before { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    content: ''; 
}

但如果不工作，你也可以添加邊框僞類，因爲我原本打算：

table th:before { 
    border-right: 1px solid #000000; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    content: ''; 
    z-index: 1000; 
}

僞類是偉大的，我用他們所有的時間和他們即使在IE8中也有非常廣泛的瀏覽器支持。

來源

2014-07-16 17:55:49

當在IE8中應用css漸變過濾器時，表格單元格會丟失邊框

回答

相關問題