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

Conditional comments were removed in IE10 and later：

Internet Explorer中已删除对条件注释的支持提高互操作性的10种标准和怪癖模式符合HTML5。这意味着现在有条件评论被视为常规评论，就像在其他浏览器中一样。这种变化可以影响专门为Windows Internet Explorer或使用浏览器嗅探来改变其在Internet中的行为的页面资源管理器。

此外，media queries don't work in 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]-->

使用IF定位IE CSS

3 个答案: