浏览器兼容性

延伸问题：

• 浏览器内核有哪些

定义

浏览器由于内核的不同导致在解析页面时会存在差异，从而使相同的代码渲染出不同的效果或者有的能够触发事件，有的不能够触发事件，这就是浏览器的 兼容性① 。

①:浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。—百度

差异

了解了兼容性的定义，那么我们可以从浏览器的内核（引擎）、HTML、CSS去考虑

内核

浏览器内核（引擎）其实指的是 浏览器②渲染引擎。浏览器渲染引擎是由各大浏览器厂商依照 W3C 标准自行研发的，所以不同的浏览器使用的内核是不同的。

目前，市面上使用的主流浏览器内核有5类：

• Trident：俗称 IE 内核
• Gecko：俗称 Firefox 内核
• Presto：Opera 前内核，现内核拥抱 Chrome 的 Blink
• Webkit：Safari 内核，也是 Chrome 内核原型
• Blink：Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器内核，Blink 其实是 Webkit 的一个分支

②：浏览器一般由七个模块组成：用户界面、浏览器引擎、渲染引擎、网络、js解释器、UI 后端、数据持久化存储

• 用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了页面显示窗口之外的其他部分。
• 浏览器引擎 －可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。
• 渲染引擎 －解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。
• 网络 －用来完成网络调用或资源下载的模块。
• UI 后端 －用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
• JS解释器 －用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore。
• 数据存储 －浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用。

参考文章

HTML

1.H5新标签在IE9以下的浏览器识别，需要使用插件

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

html5shiv.js下载地址：https://github.com/aFarkas/html5shiv/releases

2.ul标签内外边距问题。

ul 标签在 IE6\IE7 中，有个默认的外边距，但是在 IE8 以上及其他浏览器中有个默认的内边距。解决方法：统一设置 ul 的内外边距为 0

CSS

1. css 的 hack 问题：主要针对 IE 的不同版本，不同的浏览器的写法不同
   IE 的条件注释 hack ：

 <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->          
 <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

2. IE6 双边距问题：IE6 在浮动后，又有横向的 margin ，此时，该元素的外边距是其值的 2 倍
   解决办法：display:block;

3. IE6 下图片的下方有空隙
   解决方法：给 img 设置 display:block;

4. IE6 下两个 float 之间会有个 3px 的 bug
   解决办法：给右边的元素也设置 float:left;

5. IE6 下没有 min-width 的概念，其默认的 width 就是 min-width

6. IE6 下在使用 margin:0 auto; 无法使其居中
   解决办法：为其父容器设置 text-align:center;

7. 被点击过后的超链接不再具有 hover 和 active 属性
   解决办法:按 lvha 的顺序书写 css 样式，

 ":link": a标签还未被访问的状态；
 ":visited": a标签已被访问过的状态；
 ":hover": 鼠标悬停在a标签上的状态；
 ":active": a标签被鼠标按着时的状态；

8. 在使用绝对定位或者相对定位后，IE 中设置 z-index 失效，原因是因为其元素依赖于父元素的 z-index，但是父元素默认为 0，子高父低，所以不会改变显示的顺序

9. IE6 下无法设置 1px 的行高，原因是由其默认行高引起的
   解决办法：为期设置 overflow:hidden; 或者 line-height:1px;

Javascript

1. 标准的事件绑定方法函数为 addEventListener，但 IE 下是 attachEvent

2. 事件的捕获方式不一致，标准浏览器是由外至内，而 IE 是由内到外，但是最后的结果是将 IE 的标准定为标准

3. window.event 获取的。并且获取目标元素的方法也不同，标准浏览器是 event.target，而 IE 下是 event.srcElement

4. 在低版本的 IE 中获取的日期处理函数的值不是与 1900 的差值，但是在高版本的 IE 中和标准浏览器保持了一致，获取的值也是与 1900 的差值。
   比如：var year= new Date().getYear()

5. ajax 的实现方式不同，这个我所理解的是获取 XMLHttpRequest 的不同，IE 下是 activeXObject

6. IE 中不能操作 tr 的 innerHtml7 .获得 DOM 节点的父节点、子节点的方式不同
   其他浏览器：parentNode：parentNode.childNodes
   IE：parentElement：parentElement.children

参考文章