在HTML中使用条件注释

时间:2009-01-05 22:31:45

标签: css xhtml

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

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

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

提前致谢。

5 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:4)

Internet Explorer(版本6 especially)的本质使得某些样式表适用于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中导航。

答案 2 :(得分:2)

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

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

这是一个很棒的做法! official documentation page of conditional comments有许多条件注释的例子和组合,值得一读。该页面还指出:

条件注释使开发人员可以轻松利用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]-->