JS如何判断IE浏览器是否开启兼容性视图?

JavaScript024

JS如何判断IE浏览器是否开启兼容性视图?,第1张

<script language="javascript" type="text/javascript">

var version = navigator.appVersion

var start = version.indexOf("MSIE")

var temp = version.slice(start+5, start+6)

if(temp=="9"){

alert(9)

}else if(temp=="8"){

alert(8)

}else if(temp=="7"){

alert(7)

}else if(temp=="6"){

alert(6)

}else if(temp=="5"){

alert(5)

}

</script>

在IE8下,如果开启兼容性视图,返回值是7,否则返回8。

其实一般网站没问题很少有人会去懂兼容性按钮,可以在网站头部加

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

如果是高版本的浏览器自动会用IE7内核去渲染,就是所谓的兼容模式吧,狠多大型网站都可以看到这行代码,可以减小前端的工作量。

浏览器兼容性涉及的内容有很多,特别是针对IE浏览器,以下整理出五种常见的浏览器兼容性解决方法。

一、样式初始化

由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几个方面。

1.pandding 值和 margin 值均设置为 0

将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

2.html 标签

设置统一的字体,如果使用 rem 单位,则 html 需要设置合适的字号。

3.a 标签

设置统一的颜色,将 text-decoration 属性设置为 none。

4.ol 和 li 标签

list-style 统一设置为 none。

5.input、textarea、select、button 等标签初始化

border 设置为 none;

根据需要设置颜色和背景色。

二、使用不同类型的浏览器内核前缀

1.Chrome(谷歌浏览器) 与 Safari(苹果浏览器) 内核:Webkit (中译无) 前缀:-webkit-

2.IE (IE浏览器) 内核:Trident (中译三叉戟) 前缀:-ms-

3.Firefox (火狐浏览器) 内核:Gecko(中译壁虎) 前缀:-moz-

4.Opera (欧朋浏览器) 内核:Presto(中译迅速) 前缀:-o-

例:

-webkit-border-radius: 10px/ 谷歌浏览器 /

-ms-border-radius: 10px/ IE浏览器 /

-moz-border-radius: 10px / 火狐浏览器 /

-o-border-radius: 10px / 欧朋浏览器 /

border-radius: 10px

1

2

3

4

5

三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE 浏览器使用 CSS hack( 即给特点前缀)

注:以下符号是写在属性名前面。

兼容 IE6 的 hack 符号:- 或 _

兼容 IE6 、7 的 hack 符号:` ~ ! @ # $ % ^ &* ( ) + = [ ] | <>, . 任意一个符号

兼容 IE6、7、8 的 hack 符号:.

注:以下符号是写在属性值与分号直接,中间不留空格。

兼容 IE8 的 hack 符号:\0/

兼容 IE8、9、10 的 hack 符号:\0

兼容 IE6、7、8、9、10 的 hack 符号:\9

例:

/ hack符号在前 /

_border-radius: 10px / IE6 /

+border-radius: 10px / IE6\7 /

.border-radius: 10px / IE6\7\8 /

/ hack符号在后 /

border-radius: 10px\0/ / IE8 /

border-radius: 10px\0 / IE8\9\10 /

border-radius: 10px\9 / IE6\7\8\9\10 /

1

2

3

4

5

6

7

8

9

2.为不同的版本编写独立的样式,其他浏览器识别不到。

例:大于 IE9 的浏览器使用这个单独的 style9.css 样式

1

2

3

例:只有 IE6 浏览器使用的 style6.css 样式

1

2

3

四、其他特殊样式

1.cursor 属性的 hand 值和 pointer 值

问题:firefox 浏览器不支持 hand 值,但其他浏览器均支持 pointer 值。

解决: 统一使用 cursor 属性的 pointer 值。

2.水平居中

问题:IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。

解决: 可通过设置父级 text-align:center 实现。

3.属性值 “inherit”

问题:IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。

解决:谨慎使用属性值 “inherit”。

五、JS兼容性

1.ES6语法

问题:IE11 不支持箭头函数、class 语法等(报 SCRIPT1002: 语法错误),不支持 Set 和 Map 数据结构(不报错)及 Promise 对象,支持 let 和 const,IE10 及以下不支持任何 ES6 语法。

解决:如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

2.操作 tr 标签

问题:IE9 及 IE9 以下版本浏览器,不能操作 tr 标签的 innerHTML 属性。

解决:可以操作 td 标签的 innerHTML 属性。

3.Ajax

问题:IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。

解决:在使用 Ajax 请求之前设置 jQuery.support.cors=true。

4.event 对象的 srcElement 属性

问题:IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性,没有 target 属性。

解决:obj = event.target?event.target:event.srcElement。

5.DOM 事件绑定

问题:IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法,而其他浏览器是 addEventListener() 方法。

解决:判断 IE 浏览器版本,如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法,注意 attachEvent() 方法的用法,第一个参数为“onclick” 而不是“click”。并且没有第三个参数。