一. 概述
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容
二. 浏览器内核
| 浏览器 | 内核（渲染引擎） |
|---|---|
| Chrome谷歌 | 之前Webkit，已改Blink内核 |
| FireFox火狐 | Gecko |
| Safari苹果 | Webkit |
| IE | Trident |
| Opera欧朋 | 现已改用Google Chrome的Blink内核 |
三. 样式兼容
不同浏览器的标签默认的margin和padding不同
- 问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
- 碰到频率: 100%
- 解决方案：
CSS里 *{margin:0;padding:0;} 但是性能不好
一般我们会引入reset.css样式重置
- 备注： 这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。
CSS3新属性
- 哪些CSS3属性有兼容性问题：
定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
- 解决方案：加浏览器前缀兼容早期浏览器
-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题
- 问题症状: 常见症状是IE6中后面的一块被顶到下一行
- 解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
<div id=”imfloat”>
相应的css为
# imfloat{
float:left;
margin:5px;//IE下理解为10px
display:inline;//IE下再理解为5px}
- 备注： 我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
4. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
5. css hack解决浏览器兼容性
不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。
下面是css hack写法：
background-color:yellow0; 0 是留给ie8的
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
