添加针对 IE 浏览器的 CSS 类:JavaScript 还是条件注释?

Add CSS classes targeting IE browsers: JavaScript or Conditional Comments?

提问人:Jeff 提问时间:6/29/2012 最后编辑:Jeff 更新时间:6/29/2012 访问量:2003

问:

我的目标是从我的文档中删除 IE 条件注释,但我认识到我仍然需要使用特定于 ie6、7、8 的样式表(如果我错了,请纠正我)。<head>

例如,HTML5Boilerplate 3.0 使用以下 IE 条件:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>   <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

因此,相反,我想使用 JavaScript 将类添加到我的 html 标签中,从而导致这种情况(如图所示):

<html lang="en" class="ie6 ie7 ie8">

所以我的问题:与使用 IE 条件注释相比,使用 JavaScript 将 CSS 类添加到文档的 html 元素的缺点(后果)是什么?

我现在能想到的一个效果:

  1. IE 客户端可能禁用了 JavaScript。对我来说,这不是问题;访问“我的网站”的客户端需要启用 JS。

编辑:我将继续承认,添加这些类的最可靠方法是(可悲地)使用 IE 条件注释。谢谢大家的对话。

javascript jquery internet-explorer modernizr conditional-comments

评论

1赞 AlienWebguy 6/29/2012
为什么您的目标是删除条件评论?真的有那么重要吗?
0赞 Jeff 6/29/2012
这纯粹是个人喜好。如果我能删除它们,我会的!=)
0赞 Jashwant 6/29/2012
您将如何从 javascript 中检测 ie?
0赞 Ian 6/29/2012
@Jashwant navigator.userAgent 或 jQuery 做得更好,我敢肯定使用 $.browser
0赞 Jeff 6/29/2012
使用 JavaScript 检测 IE 很容易。有关示例,请参阅上面的链接“如图所示”。

答:

5赞 Praveen Kumar Purushothaman 6/29/2012 #1

另一件事是,仅使用 JavaScript 并不是完美检测浏览器的好主意。您听说过用户代理欺骗吗?JavaScript 通过用户代理检测浏览器。但是,如果浏览器带有欺骗性的用户代理,那么 Firefox 可以像 Chrome 一样运行。希望你明白!

评论

2赞 Jeff 6/29/2012
+1,我想知道实际的 IE6-8 用户中有多少百分比欺骗他们的 UA?
0赞 user850234 6/29/2012 #2

为什么不能为所需的类添加具有 IE 特定设计的单独样式表,而不是向 html 元素添加更多类。您还可以参考 http://paulirish.com/2009/browser-specific-css-hacks/ 在一个 css 文件中,您可以使用 css hacks 针对所有浏览器。这也将解决您从 html head 标签中删除 IE 特定条件的最初目的

评论

0赞 Jeff 6/29/2012
是的,我一直在使用特定于 ie 的样式表“ie.css”来做到这一点,但我一直在使用 IE 条件注释加载它,这样其他浏览器就不会窒息它。
0赞 user850234 6/29/2012
您可以参考我的答案中的链接,其中提到了如何从单个 css 文件以及其他浏览器针对不同版本的 IE。添加和删除类有时会有非常讨厌的行为,尤其是在 IE 中,它会减慢处理速度
1赞 Jashwant 6/29/2012 #3

从您提供的同一链接中,

  1. 您不会加载不会应用的规则,因为它们不适用 对于此浏览器。
  2. 您不依赖于可以独立于 CSS 关闭的技术。
  3. 您不依赖于语法错误可能会暂时中断浏览器检测的技术。
  4. 浪费浏览器时间设置相关类并重新计算无处不在的样式是没有意义的。是的,这次是 基本上不引人注意,但从“肮脏与干净”的角度来看,我 认为这会让它更脏。

我个人认为,你不应该依赖嗅探,也不应该只加载不必要的css规则。userAgentie