html中的条件注释答案

【问题标题】：conditional comments in htmlhtml中的条件注释
【发布时间】：2016-02-15 21:17:21
【问题描述】：

你能告诉我错误在哪里吗？我在任何浏览器中都看不到条件 cmets 中的任何文本。

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;
}

谢谢。

【问题讨论】：

标签： html css comments conditional

【解决方案1】：

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

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

但是，当您的目标浏览器不是 IE 时，您必须使用 2 个 cmets，一个在代码之前，一个在代码之后。 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 是 Microsoft 特有的（并且仅在 IE10+ 中可用），所以只能在 Internet Explorer 10 及更高版本中解析。

【讨论】：

感谢您的回答。有什么方法可以专门为 IE10 或 Microsoft Edge 编写代码吗？我的代码在 Mozilla、Chrome 和 Opera 上运行良好，但在 Explorer 和 Edge 中有些元素发生了一些变化。不知道怎么解决。
谢谢，如果有人在寻找 Microsoft Edge hack，这可行 _:-ms-lang(x), _:-webkit-full-screen, .selector { property:value;}