谈谈IE条件注释
在项目的开发过程当中,确实在IE的条件注释中碰到了有点儿坎儿,项目后又小小的看了一下,做个小总结吧。
一、先了解一下它的用法(摘自:IE的条件注释)
1. 概述
IE条件注释(简称condcom)是一种IE5.0版本以上特有的,允许程序员使用的一种特殊的指令。
2.条件注释的各种类型
<!--This is acomment-->3.IE条件注释
<!--[if IE]><![endif]-->4.相反的IE条件注释:
<!--[if ! lt IE 7]> <![IGNORE[--><![IGNORE[]]> 这里的代码与条件语句匹配 <!--<![endif]-->简单来说,除了IE任何Windows平台的浏览器将条件注释解释成为普通的HTML注释。你不能够在CSS代码本身中使用条件注释。IE条件注释对隐藏或者显示给IE的代码非常的有用,他允许程序员使用流行的CSS “hacks”。
5.IE特有的代码
<!--[if IE]><!--[endif]-->正如你所看到的,这是一段普通的HTML注释。所有的浏览器都会将以结束的语句解释成为注释。然而,IE却会看到[if IE]>这一段,它告诉IE解析下面的代码知道
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Test page</title></head> <body> <!–[if IE]>You are using Internet Explorer, bad choice I’d say!<![endif]–> </body> </html>......
二、归类一下IE条件注释版本匹配的应用
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]--> <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> <!--[if IE 7]> 仅IE7可识别 <![endif]--> <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
着重说一下第一个——反-IE注释
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Test page</title></head> <body> <!--[if !IE]>--> 你正在使用一个好浏览器 <!--<![endif]--> </body> </html>在除了IE之外的浏览器中,下面的话是可见的“你正在使用一个好浏览器”。在这个条件注释中我们使用了感叹号(!),叫做取反操作符,将布尔操作数取反。这种版本的反条件注释和微软的无效版本没有太大的不同,但是他确实很有效,虽然其他浏览器有较小的可能阻止它,并且工作的很好。
重要的说明:要记住,对这种版本的反条件注释的任何修改,例如版本匹配或者比较操作将不能正常工作,或者在页面上输出”-->”。但是如果你想使用这样的功能,看我下面写的。
反 IE条件注释
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Test page</title></head> <body> <!--[if !gt IE 6]><![IGNORE[--><![IGNORE[]]> Some will see and some will not! <!--<![endif]--> </body> </html>上面的代码对任何IE6以上的浏览器都会隐藏。要记住这种代码的最简单的方法就是看除了(!)号之外的if里面的表达语句。上面的例子是 gt IE 6,意味着在这段条件注释中的语句将对IE6以上的版本隐藏。
当IE见到[if !gt IE 6]>,如果浏览器版本匹配(也就是说,浏览器不是IE6以上的版本),那么目前的标记会包含进页面里。它不会等待-->关闭这个注释。然而,在这种情况下,我们也希望让非IE浏览器包含进来。因此我们希望关闭注释。但是如果我们只是在[if !gt IE 6]>后面添加-->,IE会在页面上面输出-->。所以我们希望设置一些IGNORE标记,使得HTML标记的结束部分(-->)对IE是隐藏的。接着我们必须要关闭IGNORE部分,但是这样我们又会在其他的浏览器中遇到问题(关闭部分-->会显示在他们自己的页面中)。所以在-->之后(已经被IE忽略),我们为非IE浏览器设置一个新的IGNORE部分。然后我们关闭它,在所有的浏览器中都会关闭。非常的复杂,但是这是使它在IE和其他浏览器中工作的唯一办法。
对于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! */ }。
很好很强大是吧?不妨来动手试试看吧!
四、总结
OK,就这么多吧。
虽然没有自己的话,但是在项目的应用及解决对应问题的过程当中,也深刻的理解了一些,也对它的应用场景有了系统的认识。我想这样就OK了吧。