在HTML中使用条件注释

StackOverflow https://stackoverflow.com/questions/414738

  •  03-07-2019
  •  | 
  •  

题

我对网络开发和学习都比较陌生。在查看不同网站的源代码时，我最近遇到了“条件评论”。我想我现在明白他们做了什么但不确定何时使用它们。

我看到它们主要用于实现IE的不同样式表，并想知道这是不是很好的做法？

在这种情况下，如果答案为“是”。然后在开发网站时，使用两个单独的样式表修复错误是“常见的地方”，例如为IE创建一个样式表，为Firefox，Opera等创建一个样式表？

提前致谢。

有帮助吗？

解决方案

据我所知，IE仅支持条件注释，并且它们在不支持它们的浏览器中优雅地降级（因为它们看起来像普通注释）。普遍的共识是，如果您使用非标准浏览器功能来对抗另一个非标准浏览器“功能”，则可以使用非标准浏览器功能。 （即IE中对CSS的蹩脚支持）。所以你会发现它是调整CSS的一种非常常见的解决方案。

其他提示

Internet Explorer的性质（版本6 特别是）使得一些样式表适用于IE，而有些则不行。出于那些不这样做的目的，您可以使用条件注释来获得仅针对IE显示的CSS代码。我必须使用它，因为Internet Explorer（mis）处理CSS下拉菜单的方式。

要使我正在处理的网站正确呈现下拉菜单中的 hover 功能，我必须实现crosshover.htc文件。这是我必须使用的代码：

     <!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}

</style>
<![endif]-->

如果我不这样做，下拉菜单会分开，无法在Internet Explorer 6中导航。

我使用条件注释来检测我网站的访问者是否使用IE6或更低版本。如果是这种情况，我会加载 IE7.js脚本，这会克服一些这些旧浏览器中的错误。还有一个用于模拟IE8支持的脚本。

有些人还会使用评论来帮助概述页面的某些区域，例如页脚，页眉或主要内容（通常在模板中）。

但是如果你使用div和CSS（它听起来像你），你应该能够通过DIV ID和CSS样式告诉你的内容是什么或者你在哪个HTML区域。请记住使用明确的名称，尽量不要为了更容易打字而缩写它们。

如果这对您来说是一个问题，那么智能感知是一件很棒的事情，可以帮助我们解决这类问题。如果没有，那么CTRL + C和CTRL + V可能是下一个最好的事情：）

这是一个很棒的做法！ 条件评论的官方文档页面有许多示例和组合有条件的评论，值得一读。该页面还指出：

条件注释使开发人员可以轻松利用Microsoft Internet Explorer 5及更高版本提供的增强功能，同时编写在功能较少的浏览器中正常降级或在Windows Internet Explorer以外的浏览器中正确显示的页面。条件注释是区分用于特定版本Internet Explorer的层叠样式表（CSS）规则的首选方法。

现在Internet Explorer是功能最少的浏览器，因此您最有可能使用条件注释来完全相反，即利用所有其他功能提供的增强功能浏览器，同时编写在Microsoft Internet Explorer中正常降级的页面。

您可以使用条件注释来修复不受支持的CSS样式，或者隐藏Internet Explorer中的代码，如下所示：

<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top