浏览器兼容问题解决方案之一:条件注释

普通的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的视角是:

男神

其他浏览器的视角是:
在这里插入图片描述

那么如果想要if条件注释中所谓的html代码IE5~IE9虽然能识别但是不能执行,而其他浏览器也能识别并执行的话,可以这样写

<!--[if !IE]>--> html代码 <!--<![endif]--> 

思路就是把条件注释语法结构的前缀和后缀分别给注释掉,这时

IE5~IE9的视角变成了:
在这里插入图片描述

其他浏览器的视角则变成:
在这里插入图片描述

就都能识别出中间的代码了。

个人觉得使用条件注释的时候的一个注意点

<!--[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专有的一些问题照样存在)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值