2012-07-28 146 views
24

我知道,你可以使用內部HTML的IE條件註釋裏面條件註釋爲html中的特定元素。例如,你可以使用此Chrome/Safari瀏覽器破解CSS文件的CSS代碼裏面...使用IE瀏覽器的樣式表

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
} 

但黑客利用IE的CSS樣式表像這裏面:

<!--[if IE]> 
     .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
<![endif]--> 

做不行。如何在樣式表中使用來僅限IE?

+1

條件註釋:1)不是一個劈2)並不適用於CSS,只有HTML。 – BoltClock 2012-07-28 18:44:18

+0

感謝BoltClock,所以我看到 – 2012-07-28 19:09:14

回答

23

條件註釋在樣式表中不起作用。相反,您可以在您的HTML中使用條件註釋將不同的CSS類或ID應用於可以使用CSS定位的元素。

例如:

<!--[if IE]> 
    <div id="wrapper" class="ie"> 
<![endif]--> 
<!--[if !IE]> 
    <div id="wrapper"> 
<![endif]--> 

另外,還有一些工具如Modernizr是在做一個非常相似的方式特徵檢測(通過添加類的<html>元素)。您可以使用它逐步增強您的新版瀏覽器的設計/腳本,同時仍支持舊版瀏覽器。

+0

謝謝你,你的代碼是有意義的,它可以用來做我想做的事情... – 2012-07-28 19:11:59

+0

Modernizr如何自動化它?請解釋,因爲我只知道Modernizr「檢測」。 – 2013-10-20 22:40:37

+1

@YannisDran,你是對的,它不會自動添加IE類,但是,它會執行功能檢測,然後您可以通過CSS進行目標檢測也是類似的方法。我已經更新了答案,對此更清楚。 – 2013-10-21 16:31:13

4

你不能使用IE條件註釋,但你可以使用黑客。 This page of CSS hacks解釋IE黑客可以使用(和更多)。

+0

謝謝,這種回答我的問題(順便說一句,我以前看到這篇文章,我通常做一些研究之前,我張貼在堆棧),但它只有一個CSS的IE7解決方案和下面即: IE 6和下面 * HTML {} IE 7及以下 *:第一胎+ HTML {} * HTML {} IE 7只 *:第一胎+ HTML {} 我想一種使用in-CSS黑客攻擊所有IE瀏覽器的方法,但似乎這是不可能的。 – 2012-07-28 19:07:26

2

你不這樣做,只需使用IE條件註釋加載特定的IE瀏覽器的樣式表:

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css"></link> 
<![endif]--> 

有CSS黑客,但注意,破解需要使用解析錯誤(某種)將特定的CSS規則定位到瀏覽器。這些不太可能在隨後的修補程序中被更正爲瀏覽器的特定版本,但它們將在更高版本中得到糾正(因此,IE 9和10不會受到針對IE 6或針對Mac的IE 5的CSS攻擊的影響。 ..)。

1

你想要做的就是像樣式表中的任何東西一樣對任何其他瀏覽器進行樣式設置。在將普通樣式表導入頁面之後,您將隨後導入一個IE特定的樣式表和常規<!--[if IE]>條件語句。

以下方法導入所有瀏覽器的樣式,然後使用您的IE特定樣式來覆蓋那些不兼容,無法正確呈現或需要在IE中調整使用的樣式。

17

它可以比德里克Hunziker說起來容易:

只要加入這個代碼,因爲它是:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 

然後你就可以很容易地對其進行定位,例如,如果你想針對IE 8和寫下:

.lt-ie9 body{css rule here;} 

你就完成了!

乾杯

2

IE樣式表黑客

.Class { 
    color: green;  /* standard */ 
    color: green\9; /* IE 8 and below */ 
    *color: green;  /* IE 7 and below */ 
    color: green !ie; /* IE 7 and below */ 
    _color: green;  /* IE 6 */ 
} 
+13

請不要使用上面的黑客。這些信息具有誤導性,可能會給您帶來比解決問題更多的問題。舉例來說,'\ 9' hack *不會針對IE 8及以下版本。它會影響IE 7,8,9和10.請不要使用這些**。 – Sampson 2014-12-12 23:45:57