使用條件CSS來顯示漸變圖像到IE

我從來沒有使用條件之前（但知道我最終必須 - 我恨你IE）。基本上，我有使用CSS梯度在我的網站上的橫幅：使用條件CSS來顯示漸變圖像到IE

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.44, #2B7BB8), 
    color-stop(0.72, #4394CE), 
    color-stop(0.86, #58A8E1) 
);

所以我增加了一個條件語句來裝載我在GIMP準備IE所有版本梯度圖像：

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]--> 
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

我的電腦上沒有IE瀏覽器（linux），因此我使用Adobe Browser Labs來測試我的網站在IE中的樣子。但是，圖像仍然無法加載。我的css的最終版本看起來像這樣：

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.44, #2B7BB8), 
    color-stop(0.72, #4394CE), 
    color-stop(0.86, #58A8E1) 
); 

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]--> 
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

我做錯了什麼？

來源

2011-12-17 n0pe

IE10時被釋放，並支持CSS3漸變關於什麼的？使用功能檢測而不是瀏覽器檢測 – 2011-12-17 17:17:45

好的一點，我會改變它'如果lt IE9' – n0pe 2011-12-17 17:18:48

其實我查了它並且微軟正在刪除IE10中的條件註釋，並且IE9不支持漸變，所以你可以做'<！ - [if IE] - >' – 2011-12-17 17:41:29

http://www.quirksmode.org/css/condcom.html

看樣子你不能做條件註釋在CSS文件中，只有在HTML文件中。

所以，如果你在一個包裝樣式元素它應該工作

說完看着它，CSS3漸變只支持IE10和有條件的意見已在IE10被刪除。因此，您可以使用該條件註釋針對所有版本的IE。

來源

2011-12-17 17:20:32

這應該工作：

/* For Internet Explorer 8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E1E1E1');

來源

2011-12-17 17:16:55

最佳做法是使用功能檢測，而不是瀏覽器嗅探或條件註釋。而且，我知道這些有條件的評論將在IE10中消失，所以這將很快停止工作。無論如何，你應該看看兩個項目（當然是FOSS）：Modernizr.com（我認爲這不會直接幫助你）和h5bp.com（HTML5 Boilerplate dot com）。後者是充滿了偉大的最佳實踐和一個特別是在HTML使用條件註釋，像這樣：

<!doctype html> (you don't have to use HTML5 here, this will still work) 
<!--[if lt IE 7]> <html class="no-js ie678 ie6" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie678 ie7" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie678 ie8" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

注意，這基本上是將您的HTML元素不同的類。所以，如果用戶使用IE8，那麼在HTML元素上將會有一個類ie8和ie678。

然後，在你的CSS，你僅僅需要做這樣的事情：

.ie678 { background-image:url('img/ieback.png'); } 
.ie678 { background-repeat:repeat-x; }

，自然，這兩個樣式規則將被啓用。

祝你好運！

PS。我上面提到了Modernizr.com，因爲它全部都是關於功能檢測的。您可以使用來檢測是否支持CSS漸變，但它不一定會告訴您IE篩選器是否可以使用。但是，您可以簡單地檢測梯度是否起作用，如果不起作用，則使用MS濾波器並希望獲得最佳效果。我懷疑，條件評論更多的是你之後。

來源

2011-12-17 17:29:50 mkoistinen

這很酷，我不知道。謝謝 – n0pe 2011-12-17 17:33:23

使用CSS3餡餅，而不是http://css3pie.com/documentation/supported-css3-features/

來源

2011-12-17 17:34:32 aWebDeveloper

使用條件CSS來顯示漸變圖像到IE

回答

相關問題