前端浏览器兼容性-兼容ie的前端框架

市面上的浏览器种类繁多前端浏览器兼容性，不同浏览器的内核也不尽相同，因此各个浏览器对网页的解析也存在一定差异。

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

常见的浏览器内核：

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

IE浏览器Trident内核，又称IE内核

Chrome Webkit 核心，现在是 Blink 核心

火狐浏览器Gecko内核，俗称火狐内核

Safari 浏览器 Webkit 内核

Opera 浏览器本来就是自己的 Presto 内核，后来加入了 Google 大军，从 Webkit 到 Blink 内核；

360浏览器IE+Chrome双核

猎豹浏览器IE+Chrome双核

百度浏览器IE内核

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

常见的兼容性问题：

1.不同浏览器标签默认的outer patch(margin)和inner patch(padding)不同

解决方案：添加通配符 * { margin: 0; 填充：0； } 在 CSS 中

2、IE6双面边距问题； 如果在IE6中设置了float，同时设置了margin，就会出现margin问题

解决方法：设置display:inline；

3.当标签的高度设置小于10px时，会超过你在IE6和IE7中设置的高度

解决方法：对超过高度的label设置overflow:hidden前端浏览器兼容性，或者设置line-height的值小于你设置的高度

4.图片默认有间距

解决方案：img布局使用float

5. IE9以下浏览器不能使用opacity

解决方案：

不透明度：0.5； 过滤器：alpha（不透明度= 50）； 过滤器：progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6.边距重叠问题； 当相邻的两个元素设置margin margin时，margin取最大值，舍弃最小值；

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

7. 游标：safari 不支持手形显示手型

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

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

解决方法：在父元素上设置position:relative