IE版本判断代码 if IE 6

在项目中,经常会遇到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文件中使用。 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Lemon黄

JavaScript小游戏2

添加CSS样式 这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

10320
来自专栏芋道源码1024

遍历集合时删除元素,到底发生了什么

当通过 for 循环遍历集合时,一般禁止操作 (add or remove) 集合元素。虽然开发规范里写的非常清楚,但最近还是有人掉坑里导致出了一个小 BUG,...

12640
来自专栏大前端开发

《Vue3.0抢先学》系列之:一个简单的例子

书接上文:你被我撩拨了一下,从Github上下载了Vue3.0的源码。然后呢,你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢?

16320
来自专栏sktj

Linux logrotate 详细

志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到。对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了...

4610
来自专栏云技术+云运维

RAC一个节点自动重启问题分析

题记:在RAC数据库的故障当中,节点重启的现象很常见,在这种问题的处理当中,有一定的规律性。为了更好的说明这个问题的处理过程,保证出现该类问题的时候,能够有序的...

9430
来自专栏程序员成长指北

渲染树的形成原理你真的很懂吗?

看了上面的概念好像太“官方”,解释就是 DOM 是对 HTML 文档结构化的表述,后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引...

10450
来自专栏前端技术分享|前沿资讯|读书分享

lib-flexible适配大屏方案(附移动端适配)

  相信大多数移动端前端开发者都是用过 lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件,属于开源项...

16940
来自专栏前端达人

这30个CSS选择器,你必须熟记(上)

css的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,...

10310
来自专栏云技术+云运维

rac节点频繁重启的问题分析

环境:两台联想R680的物理机搭建一套2节点RAC,数据库版本为ORACLE 11.2.0.4

7330
来自专栏Lemon黄

JavaScript小游戏

这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

11120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励