浏览器兼容性涉及的内容有很多,特别是针对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”。并且没有第三个参数。
很重要!在 JavaScript 社区,随着令人难以置信的框架和工具的混合,每周都会出现新的东西。人们希望旧工具将被新工具所取代。因此我们看到了流行框架交换的想法,以及纳入新诞生框架中的创新元素。所以下半年,你该选择哪个JS框架无关紧要,因为它们的功能大多是可以比较的。
JavaScript 继续迈着令人难以置信的创新步伐在前进。由于 Web 浏览器的快速发布计划,JS 的标准定为了每年更新。众多程序员说,苦逼学习的ES6还没玩溜呢,现在又更新了8个功能,但不得不感叹前端在这几年的快速发展。但只要基础打得好,都是很容易的事情。同时JavaScrip也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。JavaScript也可以用在游戏开发等方面。JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言。同时, JavaScript 也是面向对象的编程语言。
万丈高楼平地起,只有只有过硬的基础知识才能支撑js技术广阔的天地。 js本身就是趋势,随着es9的发布,各大框架也相应给出新的更新,我们只有努力掌握新的知识,才能做到有备无患。
凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript ——Atwood定律。Javascript已经在世界中闪闪发光,未来的各行各业,一定有它的身影,打好基础,向各领域,发起冲击!
js刚开始只是为了较验,随着技术社会的发展,承担的角色越来越重,刚开始玩玩jQuery感觉已经会js了,其实只是冰山一角。随着对js的了解越来越多,他即变态又可爱,即好玩又难控,即有很多兼容问题,但解决兼容是我们基本生存之道。从ajax到jsmvc一路走一路看,高载潮一浪高过一浪。