在项目中,经常会遇到IE浏览器的兼容问题,IE678简直是前端工程师的噩梦,每个版本的IE浏览器都会有比较大的差异。
我们可以使用下面的代码,判断IE浏览器版本:
if IE 8 :选择IE版本,只有该版本可见。
if lt IE 8 :lt 小于 Less than的简写,该版本以下版本可见 。
if lte IE 8 :lte 小于等于 Less than or equal to的简写,该版本及以下版本可见。
if gt IE 8 :gt 大于 Greater than的简写,该版本以下版本可见。
if gte IE 8 :gte 大于等于 Greater than or equal to的简写,该版本及以上版本可见。
if !(IE 9) :! 非,该版本之外的版本可见。
if !(IE 6)&!(IE 8) :& 且(and),IE6和IE8之外的版本可见。
if (IE 6)|(IE 8) :| 或(or),IE6或IE8可见。
代码如下:以IE8为例
<!--[if IE 8]> 只有IE8版本可见 <![endif]--> <!--[if lt IE 8]> 只有IE8以下版本可见 <![endif]--> <!--[if lte IE 8]> IE8及其以下的版本可见 <![endif]--> <!--[if gt IE 8]> IE8以上的版本可见 <![endif]--> <!--[if gte IE 8]> IE8及其以上的版本可见 <![endif]--> <!--[if !(IE 8)]> 非IE8版本可见 <![endif]--> <!--[if !(IE 6)&!(IE 8)]> 非IE6及非IE8版本可见 <![endif]--> <!--[if (IE 6)|(IE 8)]> IE6或IE8版本可见 <![endif]-->
if !IE :非IE浏览器可见
代码如下:
<![if !IE]> 除了IE以外的版本可见 <![endif]>
用法:
1、用在头部,实现不同IE浏览器版本引用不同的CSS文件:
<!--[if IE 6]> <link rel="stylesheet" href="css/IE6.css"> <![endif]-->
也可以实现多版本同时兼容:
<!--[if lte IE 6]> <link rel="stylesheet" href="css/lte6.css"> <![endif]--> <!--[if gte IE 7]> <link rel="stylesheet" href="css/gte7.css"> <![endif]-->
2、用在页面内,可用于提示浏览器升级:
<!--[if lte IE 8]> <h1>您的浏览器版本太低,请升级!</h1> <![endif]-->
如下图:
注意:
1、默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。
2、条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。
3、正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释。只能在HTML文件里,而不能在CSS文件中使用。
参考文档:
未经允许不得转载:w3h5 » IE版本判断代码 if IE 6
原创文章,作者:bd101bd101,如若转载,请注明出处:https://blog.ytso.com/231227.html