常见的浏览器兼容性问题和前端解决方案

市场上有很多类型的浏览器，并且不同的浏览器具有不同的内核. 因此，不同浏览器对网页的分析存在一定差异.

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

通用浏览器内核:

常见的浏览器内核可以分为四种类型: Trident，Gecko，Blink，Webkit

IE浏览器的Trident内核也已成为IE内核

Chrome浏览器Webkit内核，现在为闪烁内核

Firefox浏览器的Gecko内核，通常称为Firefox内核

Safari浏览器Webkit内核

Opera浏览器最初是其自己的Presto内核，后来从Webkit到Blink内核加入了Google军队；

360浏览器IE + Chrome双核

猎豹浏览器IE + Chrome双核

百度浏览器IE内核

QQ浏览器Trident（兼容模式）+ Webkit（高速模式）

常见兼容性问题:

1. 不同浏览器的标记的默认外部补丁（边距）和内部补丁（填充）不同.

解决方案: 在CSS中添加通配符* {保证金: 0;填充: 0; }

2，IE6双面距离问题；如果在IE6中设置了float，并且同时设置了边距，则会出现边距问题

解决方案: 设置display: inline;

3. 当标签的高度设置为小于10像素时，它将超过您自己在IE6和IE7中设置的高度.

解决方案: 设置溢出: 隐藏超出高度的标签，或者将行高设置为小于设置的高度

4. 图片默认有间距

解决方案: 将float用于img布局

5. 不透明度不能在IE9浏览器中使用

解决方案:

不透明度: 0.5;过滤器: alpha（不透明度= 50）;过滤器: progid: DXImageTransform.Microsoft.Alpha（样式= 0，不透明度= 50）;

6. 保证金重叠的问题；当两个相邻的元素都设置了边距边距时，该边距将取最大值而舍弃最小值；

解决方案: 为了防止边缘重叠，可以将父元素添加到子元素并将父元素设置为溢出: 隐藏；

7，Safari浏览器不支持光标: 手显示手类型

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

8. 两个块级元素，父元素设置为overflow: auto;子元素设置为position: relative;并且高度大于父元素，它将被隐藏而不是在IE6和IE7中溢出；

解决方案: 设置位置: 相对于父元素

---------------------

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-312484-1.html