前言
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎
所以浏览器兼容性问题一般指:css兼容、js兼容
览器 | 内核(渲染引擎) |
---|---|
Chrome谷歌 | 之前Webkit,已改Blink内核 |
FireFox火狐 | Gecko |
Safari苹果 | Webkit |
IE | Trident |
Opera欧朋 | 现已改用Google Chrome的Blink内核 |
一、 css 兼容
1. 不同浏览器的标签默认的margin和padding不同
问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率: 100%
解决方案:
- CSS里
*{margin:0;padding:0;}
但是性能不好 - 一般我们会引入reset.css样式重置;
备注: 这个是最常见的也是最易解决的一个浏览器兼容性问题,所有的CSS文件开头都会用样式重置
各个标签的内外补丁是0。
2. css3新属性,加浏览器前缀兼容早期浏览器
-moz-
/* 火狐浏览器 /
-webkit-
/ Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o-
/ Opera浏览器(早期) /
-ms-
/ IE */
哪些css3属性需要加:
定义关键帧动画 @keyframes
css3中的变形(transform)、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
使用:
.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; }
}