浏览器兼容性问题简介

Posted 2021-01-08 whs5280

为什么会有兼容问题？

由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。

以下为主流浏览器的内核：

我们诚然应该追求最新的浏览器使用最新的技术，但是渐进增强，向后兼容的思想一定要有：

1.html兼容性：

 　　HTML相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是，特别是HTML5增加了许多新标签。

2.CSS兼容性：

1. 不同浏览器的标签默认的外边距（margin）和内边距（padding）不同

　　解决方案：css添加通配符  *{ margin：0;padding：0; }

 

1. IE6双边距问题；在IE6设置了float，同时又设置margin，就会出现边框问题

　　解决方案：设置display：inline;

 

1. 当标签的高度设置小于10px，在IE6、IE7中超过自己设置的高度

　　解决方案：超出的高度设置overflow：hidden；或者设置line-height值小于你的设置高度

 

1. 图片默认有间距     

　　解决方案：使用float为img布局

 

1. IE9浏览器不能使用opacity

　　解决方案：opacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

 

1. 边距重叠问题；相邻两个元素都设置的margin（上下）时，margin将会取最大值

　　解决方案：可以给子元素添加一个父级元素，并且设置父级元素为overflow：hidden

 

1. Cursion：hand显示手势在safari上不支持

　　解决方案：统一使用 cursor:pointer

 

1. 两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

　　解决方案：父级元素设置position:relative

3.javascript兼容性：

 　　各个浏览器基本语法差距不大，其兼容问题主要出现在各个浏览器的实现上，尤其对事件的支持有很大问题。

• 在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent。
• 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。
• 事件处理中非常有用的event属性获得亦不相同，标准浏览器是作为参数带人，而ie是window.event方式获得，获得目标元素ie为e.srcElement 标准浏览器为e.target
• 然后在ie中是不能操作tr的innerHtml的。
• 然后ie日期函数处理与其它浏览器不大一致，比如： var year= new Date().getYear(); 在IE中会获得当前年，但是在firefox中则会获得当前年与1900的差值。
• 获得DOM节点的方法有所差异，其获得子节点方法不一致。
• IE：parentElement parentElement.children Firefox：parentNode parentNode.childNodes childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。
• 当html中节点缺失时，IE和Firefox对parentNode的解释不同。例如:
• <form>  <table>   <input/>  </table> </form> IE：input.parentNode的值为空节点 Firefox：input.parentNode的值为form 解决方法：Firefox中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
• 关于AJAX的实现上亦有所不同。

　　解决方案：使用开发库，例如JQuery等框架