如何有條件地加載CSS

下面的代碼定義，如果瀏覽器不是IE執行：如何有條件地加載CSS

<!--[if !IE]> --> 
... 
<!-- <![endif]-->

如果我想編輯有上述...

IF IE but IE version is less than 9 .. SHOW THIS 
ELSE IF IE version is greater than or equal to 9 OR Other Browser .. SHOW THIS

哪有我達到了嗎？當我搜索所有我發現是如何決定是否IE瀏覽器版本或不IE瀏覽器。

來源

2014-03-25 SearchForKnowledge

，條件註釋僅用於IE瀏覽器。一般來說，我所做的是首先加載常見案例，然後使用條件註釋加載IE版本特定的CSS。 –

這些被稱爲_conditional comments_，並廣泛記錄在網絡上。 – CBroe

另外，IE 10不支持條件註釋。 –

使用條件註釋不使用IE。

<!--[if !IE]> --> 
According to the conditional comment this is not IE 5-9 
<!-- <![endif]-->

而且你可以做更高級的東西：正如我敢肯定你已經閱讀

來源

2014-03-25 21:14:57 JohanVdR

我接受這個答案...因爲我想爲兩個目標！IE和其他瀏覽器。謝謝。 – SearchForKnowledge

你可以在CSS文件中的HTML頁面中添加CSS條件語句IE瀏覽器不僅沒有..

目標IE 8和更高

<!--[if gt IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]-->

來源

2014-03-25 21:08:41

請記住，IE10 +不支持有條件的評論（以及正確的） – Bojangles

您可以使用這樣的事情：

<!--[if lt IE 7]>  <html class="ie6"> <![endif]--> 
<!--[if IE 7]>   <html class="ie7"> <![endif]--> 
<!--[if IE 8]>   <html class="ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html>   <!--<![endif]-->

然後通過針對您的選擇：

.ie8 .your-selector

如所述here。

如果你想有一個開關，你也可以在一個類的html標籤，例如，

<!--[if gt IE 8]><!--> <html class ="i-am-so-happy-it-is-no-ancient-ie"><!--<![endif]-->

，並使用它像這樣：

.i-am-so-happy-it-is-no-ancient-ie .your-selector{...} 
.ie6 .your-selector {...}

編輯我忘了IE 9 .. NOTE：事實上保羅愛爾蘭建議使用這種形式（由我略作調整，以使非即開關可以使用單.IE的.class - 雖然你必須要知道，IE 6不支持多類，但你的想法）：

<!--[if lt IE 7 ]> <html class="ie6 ie"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7 ie"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8 ie"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9 ie"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-ie"> <!--<![endif]-->

有關說明原因，請參閱上面的link。

來源

2014-03-25 21:13:11

有趣，但它讓我很沮喪 –

我看到很多網站使用這種方法。只需像其他瀏覽器一樣添加常規條件語句即可。正確？ – SearchForKnowledge

@SearchForKnowledge不幸的是，我不記得爲什麼會出現這種情況（它有點複雜，並且在html5-boilerplate的github-repo上有一個線程），但最後一個元素正在爲普通瀏覽器呈現爲好。 –

如何有條件地加載CSS

回答

相關問題