常见的浏览器兼容性问题

常见的浏览器兼容性问题

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

常见的浏览器内核

可以分四种：Trident、Gecko、Blink、Webkit

浏览器	内核
IE浏览器	Trident内核，也成为IE内核
Chrome浏览器	Webkit内核，现在是Blink内核
Firefox浏览器	Gecko内核，俗称Firefox内核
Safari浏览器	Webkit内核
Opera浏览器	最初是Presto内核，后来从Webkit又到了Blink内核
360浏览器	IE+Chrome双内核
猎豹浏览器	IE+Chrome双内核
百度浏览器	IE内核
QQ浏览器	Trident（兼容模式）+Webkit（高速模式）

常见的兼容性问题：

• 不同浏览器的标签默认的margin和padding不一样
  解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

• IE6双边距bug：在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
  解决方案：在display:block;后面加入display:inline;display:table;

• 当标签的高度设置小于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；

• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
  解决方案：可通过加入 CSS 属性 -webkit-text-size-adjust: none;

• cursor:hand 显示手型在safari 上不支持
  解决方案：统一使用 cursor:pointer

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

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

• 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。
  解决方法：改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

• 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

详细参考于：https://www.cnblogs.com/angel648/p/11392262.html