浏览器的兼容问题及解决方案整理（建议收藏）

一、了解浏览器

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

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

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

不规则的嵌套：

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

div 中直接嵌套 li 元素是不合标准的，li 应该处于 il 内。此类问题常见的还有 p 中嵌套 div， table等元素。

不规范的DOM接口和属性设置：

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

上面代码中 top 的值，其实应该是一个字符串值，需有单位。例如：35px。

总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。

比如，如果要做一个功能，功能是想让鼠标悬停在 img 元素上方时，可以出现提示信息，经常针对 IE 做开发的人，可能会使用 img 元素的 "alt" 属性，但其他浏览器中就是不给 "alt" 属性面子。因为 W3C 标准中规定要去做这件事的属性是 "title"，大多浏览器符合标准，IE 不符合，这是 IE 浏览器内核的问题；开发者不知道 "title" ，不遵循标准去写代码，是开发者的问题。

所以，一个问题分两半，浏览器和开发者都有责任。既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的 bug 和不合标准的地方，当某一天 IE 的 "alt" 不能用于提示了，还有人用这个错误的属性去显示提示么？从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。

三、处理兼容问题的思路

1、要不要做？

（1）从产品的角度看：产品的受众、受众的浏览器比例、效果优先还是基本功能优先。

（2）成本的角度：有无必要做这个兼容。

2、做到什么程度？

答：让哪些浏览器支持哪些效果。

3、如何做？
（1）根据兼容需求选择技术框架/库(如 jquery 1.x.x )。
（2）根据兼容需求选择兼容工具： html5shiv 、 Respond.js 、 CSS Reset 、 normalize.css 、 Modernizr.js 、 postcss 。
（3）条件注释、 CSS Hack 、 js  能力检测做一些修补。
Hack ： CSS 中， Hack 是指一种兼容 CSS 在不同浏览器中正确显示的技巧方法，修补 bug 的方法
Filter ：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲， Filter 是 hack 方法中的一种。

4、渐进增强和优雅降级
（1）渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（2）优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

四、JavaScript兼容

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) { // IE
    var r = elm.attachEvent('on' + evType, fn); // IE5+
    return r;
  } else {
    elm['on' + evType] = fn; // DOM事件
  }
}

2、document.formName.item("itemName") 问题

问题说明：IE下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox 下，只能使用 document.formName.elements["elementName"]。
解决方案：统一使用 document.formName.elements["elementName"]。

3、集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ] 获取集合类对象。
解决方案：统一使用 [] 获取集合类对象。

4、自定义属性问题

问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方案：统一通过 getAttribute() 获取自定义属性。

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 只能在事件发生的现场使用。
解决方案：在事件发生的函数上加上 event 参数，在函数体内(假设形参为 evt )使用 var myEvent = evt?evt:(window.event? window.event:null)
示例：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript"> 
  function doSomething(evt) {
		var myEvent = evt ? evt :(window.event ? window.event : null);
		…
	}
</script>

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;
如果考虑第8条问题，就改用 myEvent 代替 event 即可。

11、event.srcElement 问题

问题说明：IE下，event 对象有 srcElement 属性，但是没有 target 属性；Firefox下，event 对象有target 属性，但是没有 srcElement 属性。
解决方案：使用 srcObj = event.srcElement ? event.srcElement : event.target;
如果考虑第8条问题，就改用 myEvent 代替 event 即可。

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()方法。

13、模态和非模态窗口问题

问题说明：IE下，可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口；Firefox下则不能。
解决方案：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用 window.opener 来访问父窗口。如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

14、frame 和 iframe 问题

以下面的 frame为例：
(1)访问 frame 对象
IE：使用 window.frameId 或者 window.frameName 来访问这个 frame 对象；
Firefox：使用 window.frameName 来访问这个 frame 对象；
解决方案：统一使用 window.document.getElementById("frameId") 来访问这个 frame 对象；
(2)切换 frame 内容
在IE和Firefox中都可以使用 window.document.getElementById("frameId").src = "webjx.com.html" 或window.frameName.location = "webjx.com.html" 来切换 frame 的内容；
如果需要将 frame 中的参数传回父窗口，可以在 frame 中使用 parent 关键字来访问父窗口。

15、事件委托方法

问题说明：IE下，使用 document.body.onload = inject; ， 其中 function inject() 在这之前已被实现；在Firefox下，使用 document.body.onload = inject();
解决方案：统一使用 document.body.onload=new Function("inject()"); 或者 document.body.onload = function(){}
[注意] Function 和 function 的区别

16、用 setAttribute 设置事件

var obj = document.getElementById("objId");
obj.setAttribute("onclick", "funcitonname()");

FireFox 支持，IE不支持。
解决方案：IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数；如下：

var obj = document.getElementById("objId");
obj.onclic k= function(){ fucntionname(); };

这种方法所有浏览器都支持

17、访问的父元素的区别

问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点；在FireFox下，使用obj.parentNode 访问 obj 的父结点。
解决方案：因为FireFox与IE都支持DOM，因此统一使用 obj.parentNode 来访问 obj 的父结点。

 

18、innerText 的问题.

问题说明：innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行。
解决方案：在非IE浏览器中使用 textContent 代替 innerText。
示例：

if (navigator.appName.indexOf("Explorer") > -1) {
  document.getElementById("element").innerText = "my text";
} else {
  document.getElementById("element").textContent = "my text";
}

[注] innerHTML 同时被IE、FireFox等浏览器支持，其他的，如 outerHTML 等只被IE支持，最好不用。

19、Table 操作问题

问题说明：IE、FireFox以及其它浏览器对于 table 标签的操作都各不相同，在IE中不允许对 table 和 tr 的innerHTML 赋值，使用js 增加一个 tr 时，使用 appendChild 方法也不管用。document.appendChild 在往表里插入行时FireFox支持，IE不支持
解决方案：把行插入到 tbody中，不要直接插入到表解决方法：

// 向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td"); 
cell.innerHTML = "";
cell.className = "XXXX"; 
row.appendChild(cell);

[注] 建议使用JS框架集来操作 table，如JQuery。

20、对象宽高赋值问题

问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方案：统一使用obj.style.height = imgObj.height + "px";

21、setAttribute("style", "color: red;")

FireFox支持(除了IE，现在所有浏览器都支持)，IE不支持
解决方案：不用 setAttribute("style", "color : red;")
而用 object.style.cssText = "color: red;"(这写法也有例外)
最好的办法是上面种方法都用上，万无一失

22、类名设置 setAttribute("class", "styleClass")

FireFox支持，IE不支持(指定属性名为 class，IE不会设置元素的 class 属性，相反只使用 setAttribute 时IE自动识 classname 属性)
解决方案：
setAttribute("class", "styleClass")
setAttribute("className", "styleClass")
或者直接 object.className= "styleClass";
IE和FF都支持 object.className。

23、建立单选钮

// IE以外的浏览器
var rdo = document.createElement("input");
rdo.setAttribute("type", "radio"); 
rdo.setAttribute("name", "radiobtn"); 
rdo.setAttribute("value", "checked");
// IE
var rdo = document.createElement("<input name="radiobtn" type="radio" value="checked" />");

解决方案：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有 IF-ELSE了
万幸的是，IE可以识别出 document 的 uniqueID 属性，别的浏览器都不可以识别出这一属性。问题解决。
​