普通的HTML注释形式是
<!-- 注释 -->
而IE5~IE9这5个版本的IE浏览器还另外支持一种特殊的if条件注释(感觉有点类似模板渲染时的语法结构)
<!--[if IE]> html语句 <![endif]-->
这样在处理IE浏览器兼容性问题的时候就可以把hack代码集中在一块了,或者其他意想不到的用途
if条件注释分为三种形式
1、是否IE(即:!)
<!--[if IE]> html代码 <![endif]--> <!--[if !IE]> html代码 <![endif]-->
2、是哪个版本的IE(即:=)
<!--[if IE 6]> html代码 <![endif]--> <!--[if IE 8]> html代码 <![endif]-->
3、是哪个区间的IE(即:<,<=,>,>=)
<!-- IE8以下版本的浏览器才会执行内部的html代码,如需要包含IE8则使用lte --> <!--[if lt IE 8]> html代码 <![endif]--> <!-- IE7以上版本的浏览器才会执行内部的html代码,如需要包含IE7则使用gte --> <!--[if gt IE 7]> html代码 <![endif]-->
以上代码只有IE5~IE9才能识别中间的是html代码,而IE10,IE11以及非IE都会识别成一个整体的注释,他们只用管"<!--"和"-->"就行,至于中间的就当是一堆字符而已。
那么如果想要if条件注释中所谓的html代码IE5~IE9虽然能识别但是不能执行,而其他浏览器虽然不能识别但是能执行的话,可以这样写
<!--[if !IE]>--> html代码 <!--<![endif]-->
思路就是把条件注释语法结构的前一部分和后一部分分别给注释掉,这时IE5~IE9还是识别了中间的html代码(感觉条件注释要比普通注释优先级高有木有),只是前后各多了"-->"和"<!--"无关紧要的字符,而其他浏览器也识别了中间的html代码,只是前后各多了条无关紧要的注释。
个人觉得使用条件注释的时候的一个注意点
<!--[if !IE]>--> <script src="js/jquery-3.2.1.min.js"></script> <!--<![endif]--> <!--[if IE]> <script src="js/jquery-1.12.4.min.js"></script> <![endif]-->
就是在所有浏览器中两个当中只能使用一个的话一定得记得把IE9考虑进来,因为它也是能识别条件注释的(感觉IE9就是IE向现代高级浏览器过渡的东西,CSS3只支持一部分,但是之前IE专有的一些问题照样存在)