html中的条件注释

时间:2015-11-14 09:59:34

标签: html css comments conditional

你可以告诉我哪里出错了吗?我无法在任何浏览器中看到条件评论中的任何文字。

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

谢谢。

1 个答案:

答案 0 :(得分:4)

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

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

但是,当您定位非IE浏览器时,您必须使用2条评论,一条评论之前,一条评论之后。 IE将忽略它们之间的代码,而其他浏览器会将其视为普通代码。因此,定位非IE浏览器的语法是:

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

您的代码存在一些问题,我已对其进行了更正。检查IE9和其他浏览器。现在它的工作正常,除了IE10和更高版本(因为IE10及以上版本不再支持条件标签)

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

更新:对于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及更高版本中进行解析。