html 中的条件注释

Question

请问哪里错了。我在任何浏览器中都看不到条件注释中的任何文本。

web.html
<!DOCTYPE html>
<html lang="en-US>
<head>
    <meta charset="utf-8" />
    <link href="style.css" type="text/css" rel="stylesheet" />
<head/>
<body>
    <!--[if !IE]>
        <p><span class="p-style">XXXXXXXXXXXX</span></p>
    <![endif]-->

    <!--[if IE]>
        <p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>
    <![endif]-->
</body>
</html>

style.css
.p-style {
    color:red;
}

.p-style-IE {
    color:green;
}

谢谢。

Answer 1

IE 以外的浏览器将条件语句视为注释，因为它们包含在注释标记中。

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

但是，当您的目标浏览器不是 IE 时，您必须使用 2 条注释，一条在代码之前，一条在代码之后。 IE 会忽略它们之间的代码，而其他浏览器会将其视为正常代码。因此，针对非 IE 浏览器的语法是：

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

你的代码有一些问题，我已经改正了。检查IE9和其他浏览器。现在它在 IE10 及更高版本中工作正常（因为 IE10 及更高版本不再支持条件标签）

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8" />
    <link href="style.css" type="text/css" rel="stylesheet" />
<head/>
<body>
 <p><span class="p-style">XXXXXXXXXXXX</span></p>
 <p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>
     <!--[if IE]>
    <style>
    .p-style {color:red;}
    .p-style-IE {display: none;}
   </style> 
  <![endif]-->
  <!--[if !IE]><!-->
   <style>
    .p-style {display: none;}
    .p-style-IE{color:green;}
   </style> 
   <!--<![endif]-->
</body>
</html>

更新：对于 IE10 和 IE11，

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

我们使用 -ms-high-contrast 创建媒体查询，您可以在其中放置 IE10+ 特定的 CSS 样式。因为 -ms-high-contrast 是微软特有的（并且只在 IE10+ 中可用），它只会在 Internet Explorer 10 及更高版本中被解析。

html 中的条件注释

conditional comments in html

html

css

conditional

comments