为样式表创建有效的条件注释，而不会出现'bogus comment‘验证器错误

Question

我的head标签中有以下内容：

<link rel="stylesheet" href="Scripts/styleMain.css" media="all" type="text/css" />
<![if gte IE 9]><!-->
<link rel="stylesheet" href="Scripts/styleMob.css" media="screen and (max-width:500px)" type="text/css" />
<link rel="stylesheet" href="Scripts/styleDes.css" media="screen and (min-width:501px)" type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="styleDes.css" type="text/css" />
<![endif]-->

问题是，第二行被认为是虚假的注释，同一行上的第二个标记被认为是注释的过早结束。

将额外的标签放在同一行，并且在第一个endif上，只会给我两个虚假的注释错误。

有没有办法让我的样式表带有条件，并让它们生效？或者我注定会有无效的代码，它们会纠缠于我的OCD编码？

Answer 1

第二行的开头注释分隔符放错了位置：

<!--[if gte IE 9]><!-->

从这里的语法突出显示中可以注意到，它现在正确地突出显示为注释。

下面的其余标记也将正确突出显示，因为<!-->现在显示为<!后跟-->，而不是像在无效标记中那样后跟<!--和>：

<link rel="stylesheet" href="Scripts/styleMain.css" media="all" type="text/css" />
<!--[if gte IE 9]><!-->
<link rel="stylesheet" href="Scripts/styleMob.css" media="screen and (max-width:500px)" type="text/css" />
<link rel="stylesheet" href="Scripts/styleDes.css" media="screen and (min-width:501px)" type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="styleDes.css" type="text/css" />
<![endif]-->

您的代码中没有突出显示为注释的部分将是IE9和以后的浏览器以及其他浏览器看到您的标记的方式。较老的IE只能看到您的第一个和最后一个<link>元素。

Answer 2

这应该是可行的。

<link rel="stylesheet" href="Scripts/styleMain.css" media="all" type="text/css" />
<!--[if gte IE 9]>
<link rel="stylesheet" href="Scripts/styleMob.css" media="screen and (max-width:500px)" type="text/css" />
<link rel="stylesheet" href="Scripts/styleDes.css" media="screen and (min-width:501px)"   type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="styleDes.css" type="text/css" />
<![endif]-->