IE条件注释的新用法

添加评论 2011年5月15日

对于IE条件注释的用户想必做前端的网友都非常熟悉吧,一般我们都是采用下面的代码,以使用IE额外的样式表来解决IE的兼容性问题。虽然这个方案是目前比较常用的,但是存在2个缺点:

<link rel="stylesheet" href="css/style.css" />
<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" /><![endif]-->

  1. 对IE浏览器用户会增加请求数量,影响访问速度;
  2. 一个元素的样式存放在几个地方,不便于维护,容易出错。

所以大型网站都不会使用这个方案,要么一个通用样式表搞定,要么注释不会产生请求的内嵌样式表。

那么还有更好的方法么?以下代码我是在 W3C HTML5 Loge 上发现的:

<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

这样我们就可以 easy 的在 CSS 里写:.ie6 body { /* Go to Hell! */ }。

然后 jQuery 里可以这么写:if ($('.ie6').length) { /* Go to Hell! */ }。

很好很强大是吧?不妨来动手试试看吧!

via:frully

  1. 还没有评论.想坐沙发?
  1. 还没有 trackbacks
订阅评论