前端浏览器的兼容性问题汇总

一、浏览器的内核

1. 什么是浏览器的内核？
   浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

2. 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。

3. 常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

4. 

二、浏览器适配问题

• 盒模型差异

IE盒模型：margin 、 content（包含border、padding）

W3C盒模型： margin 、border、 padding、 content
解决方案：css 里增加通配符 * { margin: 0; padding: 0; }

CSS3中的box-sizing的属性就是为了这两种模式，border-box（IE盒明星）和content-box（W3C）

img标签-图片存在边距
使用 vertical-align 属性可以清楚这种边距

• nput.type

IE下不允许修改input的类型，Firefox可以修改。尽量避免修改input的类型。

• ID

在IE下，我们是可以通过document.idName来获取元素，但是Firefox是不允许的。

而且Firefox中我们使用与html对象ID相同的变量名，所以，获取元素最好使用document.getElementById(”idName”) 代替 document.idName，避免不必要的bug

• IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

  解决方案：设置display:inline;

• 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

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

• 图片默认有间距

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

• IE9一下浏览器不能使用opacity

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

• 边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

  解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

• cursor:hand 显示手型在safari 上不支持

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

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

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

参考链接
https://www.jianshu.com/p/0d72bc1ea573