使用IF定位IE CSS

Question

我嘗試使用IF來定位IE的特定CSS更改。

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

難道我做錯了什么？

---

<!--[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]-->

謝謝。

Answer 1

在IE10及更高版本中刪除了條件注釋 ：

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

此外， 媒體查詢在IE8中不起作用 ，因此基本上您的代碼只能在IE9中使用。

Answer 2

有針對css的黑客攻擊ie9 +，例如：

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

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

在IE9 +和其他瀏覽器中查看此示例FIDDLE

Answer 3

試試這個：

<!--[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]-->