針對IE瀏覽器CSS與IF

我試圖使用IF來針對IE的特定CSS更改。針對IE瀏覽器CSS與IF

雖然，由於某種原因它不會工作。

我做錯了什麼？

<!--[if IE 8]> <style type="text/css"> @media only screen and (min-width: 900px) { html body div.left div.info ul li p.text-01:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } } </style> <![endif]--> 
<!--[if IE 9]> <style type="text/css"> @media only screen and (min-width: 900px) { html body div.left div.info ul li p.text-01:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } } </style> <![endif]--> 
<!--[if IE 10]> <style type="text/css"> @media only screen and (min-width: 900px) { html body div.left div.info ul li p.text-01:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } } </style> <![endif]--> 
<!--[if IE 11]> <style type="text/css"> @media only screen and (min-width: 900px) { html body div.left div.info ul li p.text-01:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.left div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-02:after { margin: -4% 0 0 -11%; font-size: 60px; } html body div.right div.info ul li p.text-03:after { margin: -4% 0 0 -11%; font-size: 60px; } } </style> <![endif]-->

感謝。

來源

2013-12-23 Borsn

至少你的IF精細瞄準IE。必須有一些問題與CSS。你也可以嘗試一行而不是四行。 <！ - [if gt IE 7]> – AbsarAkram

IE10及更高版本不再支持條件註釋。而IE8和更早版本不支持媒體查詢，所以也不會爲你工作。 – Spudley

無論如何，您不應該爲任何代碼需要瀏覽器特定的代碼（除了IE8中缺少媒體查詢支持），所以實際上沒有任何代碼應該是必需的。如果你認爲你需要它，那麼你可能做錯了什麼;也許你應該問這個問題。 – Spudley

有黑客對CSS的目標IE9 +像這樣：

/* target Internet Explorer 9 and Internet Explorer 10:*/ 

    @media screen and (min-width:0\0) { 
     /* ie9+ code here */ 
     ... 
    }

檢查這個例子FIDDLE在IE9 +等瀏覽器

來源

2013-12-23 12:53:09 Danield

試用此：

<!--[if IE]> 
    <style type="text/css"> 
    @media only screen and (min-width: 900px) { 
     html body div.left div.info ul li p.text-01:after { 
     margin: -4% 0 0 -11%; font-size: 60px; 
     } 
     html body div.left div.info ul li p.text-02:after { 
     margin: -4% 0 0 -11%; font-size: 60px; 
     } 
     html body div.left div.info ul li p.text-03:after { 
     margin: -4% 0 0 -11%; font-size: 60px; 
     } 
     html body div.right div.info ul li p.text-02:after { 
     margin: -4% 0 0 -11%; font-size: 60px; 
     } 
     html body div.right div.info ul li p.text-03:after { 
     margin: -4% 0 0 -11%; font-size: 60px; 
     } 
    } 
    </style> 
<![endif]-->

來源

2013-12-23 12:45:57 user3060845

查看我的評論：這不適用於IE8，IE10或IE11。 – Spudley

Conditional comments were removed in IE10 and later：

有條件的意見

支持已在Internet Explorer中被刪除 10標準和怪癖，以提高互操作性和符合HTML5模式。這意味着條件註釋現在被視爲常規評論，就像在其他瀏覽器中一樣。此更改可能會影響專門爲Windows Internet Explorer編寫的頁面或頁面，這些頁面使用瀏覽器嗅探來更改它們在Internet Explorer中的行爲。

此外，media queries don't work in IE8，所以基本上你的代碼將只能在IE9中工作。

來源

2013-12-23 12:48:39

針對IE瀏覽器CSS與IF

回答

相關問題