浏览器兼容性及其解决方案整理

一、了解浏览器
主流浏览器：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)
四大内核:Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核)
二、了解兼容问题
W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。
然而，这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如 -moz，-webkit 开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。
1、什么是兼容问题？

相同的代码，在不同的浏览器上显示的页面效果是不一样的。

2、不一样的原因是什么？

浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

3、为什么浏览器会存在兼容性问题?

同一浏览器，版本越老，存在 bug 越多，相对于版本
越新的浏览器，对新属性和标签、新特性支持越少。
不同浏览器，核心技术(内核)不同，标准不同，实现方
式也有差异，最终呈现出来在大众面前的效果也是会有
差异。
设计师写出了不规范的代码，不规范的代码会使不兼容
现象更加突出。

从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：

1、渲染相关：和样式相关的问题，即体现在布局效果上的问题。
2、脚本相关：和 脚本 相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
3、除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

不规则的嵌套：

<div><li>新闻标题一</li><li>新闻标题一</li><li>新闻标题一</li>
</div>

div中直接嵌套li元素是不合标准的，li应该处于ul内，此类问题常见的还有 p 中嵌套 div， table等元素。
不规范的DOM接口和属性设置：

document.all.a_name.style.top = 35;

上面代码中 top 的值，其实应该是一个字符串值，需有单位。例如：35px。
比如，如果要做一个功能，功能是想让鼠标悬停在 img 元素上方时，可以出现提示信息，经常针对 IE 做开发的人，可能会使用 img 元素的 “alt” 属性，但其他浏览器中就是不给 “alt” 属性面子。因为 W3C 标准中规定要去做这件事的属性是 “title”，大多浏览器符合标准，IE 不符合，这是 IE 浏览器内核的问题；开发者不知道 “title” ，不遵循标准去写代码，是开发者的问题。
所以，一个问题分两半，浏览器和开发者都有责任。既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的 bug 和不合标准的地方，当某一天 IE 的 “alt” 不能用于提示了，还有人用这个错误的属性去显示提示么？从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。
三、JavaScript兼容
3.1、addEventListener与attachEvent区别：
attachEvent:——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera。
addEventListener:——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8。
解决方案：

function addEvent(elm, evType, fn, useCapture) {if (elm.addEventListener) { // W3C标准elm.addEventListener(evType, fn, useCapture);return true;} else if (elm.attachEvent) { // IEvar r = elm.attachEvent('on' + evType, fn); // IE5+return r;} else {elm['on' + evType] = fn; // DOM事件}
}

3.2、document.formName.item('itemName')问题
问题说明：IE下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox 下，只能使用 document.formName.elements["elementName"]。解决方案：统一使用 document.formName.elements["elementName"]。
3.3、集合类对象问题
问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ] 获取集合类对象。解决方案：统一使用 [] 获取集合类对象。
3.4、自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。解决方案：统一通过 getAttribute() 获取自定义属性。
3.5、eval(‘idName’)问题
问题说明：IE下，可以使用 eval("idName") 或 getElementById("idName") 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById("idName") 来取得 id 为 idName 的HTML对象。解决方案：统一用 getElementById("idName") 来取得 id 为 idName 的HTML对象。
6、变量名与某html对象的id相同的问题
问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。解决方案：使用 document.getElementById("idName") 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上 var 关键字，以避免歧义。
7、const问题
问题说明：Firefox下，可以使用 const 关键字或 var 关键字来定义常量；IE下，只能使用 var 关键字来定义常量。
解决方案：统一使用 var 关键字来定义常量。
8、input.type属性问题
问题说明:``IE下 input.type属性为只读；但是Firefox下 input.type 属性为读写。
解决方案：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的 input，然后在同样的位置再插入一个新的 input 元素。
9、window.event问题
问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的 event 只能在事件发生的现场使用。
10、event.x和event.y的问题
问题说明：IE下，event 对象有 x、y 属性，但是没有pageX和pageY属性；firefox下，event对象有pageX，pageY属性，但是没有x，y属性。
解决方案：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;。
11、event.srcElement问题
问题说明：IE下，event 对象有 srcElement 属性，但是没有 target 属性；Firefox下，event 对象有target 属性，但是没有 srcElement 属性。解决方案：使用 srcObj = event.srcElement ? event.srcElement : event.target;
12、window.location.href问题
问题说明：IE或者Firefox2.0.x下，可以使用 window.location 或 window.location.href；Firefox1.5.x下，只能使用 window.location。解决方案：使用 window.location 来代替 window.location.href 。当然也可以考虑使用 location.replace()方法。
本篇博客转载浏览器兼容性及其解决方案整理

浏览器兼容性及其解决方案整理相关推荐

浏览器兼容性问题解决方案之CSS，已在IE、FF、Chrome测试
最近在跟一个同学共同整理一个关于浏览器兼容性问题的文档,我们主要是找出在主流浏览器中出现哪些问题,如何解决这个问题,并给出实例.在这之前,需要明白一下几个问题. 什么是浏览器兼容问题? 所谓的浏览器兼 ...
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
浏览器兼容性问题解决方案· 总结
浏览器兼容性问题解决方案 · 总结 javascript/jquery 浏览数:536 2017-9-2 普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义 ...
移动端页面兼容性问题解决方案整理（一）
移动端页面兼容性问题解决方案整理(一) 参考文章: (1)移动端页面兼容性问题解决方案整理(一) (2)https://www.cnblogs.com/changningios/p/6486610.h ...
浏览器兼容性问题解决方案之CSS——已在IE、FF、Chrome测试
在浏览器兼容之JavaScript篇--已在IE.FF.Chrome测试和浏览器兼容性问题解决方法,已在IE.FF.Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明,现 ...
移动端页面兼容性问题解决方案整理
一.浏览器 [UC浏览器]video标签脱离文档流场景:<video>标签的父元素(祖辈元素)设置transform样式后,<video>标签会脱离文档流. 测试环境:UC浏 ...
PC端浏览器兼容性问题解决方案
1.Normalize.css 不同浏览器的默认样式存在差异,可以使用 Normalize.css 抹平这些差异.当然,你也可以定制属于自己业务的 reset.css <link href=&q ...
angular浏览器兼容性问题解决方案
问题:edge浏览器下,固定列的边框消失原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webki ...

浏览器兼容性及其解决方案整理

浏览器兼容性及其解决方案整理相关推荐

最新文章

热门文章