你对浏览器的兼容性有了解吗？

什么是浏览器兼容性？

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

浏览器兼容的重要性：

1.网站做好了浏览器兼容，能够让网站在不同的浏览器下都正常显示
2.浏览器兼容能够抓住更多的网站访客
3.浏览器兼容能够给客户更好的体验

产生的原因：

由于不同浏览器所使用的内核及所支持的HTML（标准通用标记语言下的一个应用）等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。
顺带复习下浏览器内核分别是什么？
Trident内核:IE系列；
Gecko内核:Firefox；
Webkit内核:Safari；
Blink内核：是基于Webkit内核的子项目（使用的浏览器有：Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器，几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等）

经常遇到的浏览器的兼容性有哪些？解决方法是什么？

1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
图片默认有间距。解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

4.浮动IE产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有IE6会识别)

5.渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}

IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none;进行 解决.

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

7.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度。
解决方案