HTML5与IE条件注释判断语句

以前曾经写过一篇《IE条件注释判断语句》,这篇文章现在已经显地非常得落伍了。但是IE条件注释判断现在在前端开发中还是发挥着非常大的作用的,就连W3C HTML5 LOGO页面也用上了。不过W3C HTML5 LOGO使用的是最新的语句,如下:

<!--[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]-->

可是上面代码的最后一句,就是<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->,现在看来也是有些错误的。这段代码从字面上的意思是说当前是IE9+或者是非IE的浏览器。但是微软已经宣布,IE10不再支持条件注释了,所以用(gte IE 9)这个语句只能在IE9得到使用,而IE10根本不认这段代码,和其它非IE浏览器一样,只把它当成普通的注释。但是这段代码只是想判断当前浏览器是否支持HTML5,所以从最终实现效果上来说这段代码还是达到了目的。现在我整理了一份代码,演示和注释如下:

<!--[if lte IE 6]>我是版本号大于5小于等于6的IE!<![endif]-->
<!--[if IE 7]>我是IE 7!<![endif]-->
<!--[if IE 8]>我是IE 8!<![endif]-->
<!--[if IE 9]>我是IE 9!<![endif]-->
<!--[if gte IE 10]>你看不到我!<![endif]-->
<!--[if !(IE)]><!-->我是IE10或非IE浏览器!<!--<![endif]-->
<!--[if !IE]><!-->我是IE10或非IE浏览器!<!--<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->ie9以上版本 或者 其它非IE浏览器!<!--<![endif]-->

但是想通过测试浏览器是否是IE的方式来判断浏览器支不支持HTML5,这种做法是不严谨的。举个极端的例子,我用的是FireFox1.0,这是非IE,但是它却不支持HTML5。所以jQuery团队建议要使用功能判断,而不是使用浏览器判断,可以用$.support代替$.browser来判断浏览器所支持的功能。

但是使用$.support也有鞭长莫及的地方,比如$.support.boxModel在浏览器使用W3C标准盒模式(W3C CSS Box Model)渲染页面时值为true,而在IE6、IE7使用怪异模式渲染页面时值为false。但是它不能判断浏览器是否支持透明的png图,因为IE6不支持透明的png图,而IE7是支持的。所以现在很多网站还是在使用条件注释判断语句来进行开发,目前功能判断还是不能完全代替浏览器判断。

推荐一个JS框架:Modernizr,它可以用来检测浏览器对HTML5和CSS3的特性支持,著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。

此条目发表在 前端 分类目录,贴了 , , 标签。将固定链接加入收藏夹。