坚持每天做总结
。今天下班还算早。写个跟css兼容有关的知识点。便于后期查看与学习。
一、先说说各种主流浏览器的内核
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不同的浏览器内核对网页编写的解释也不同，反映在网页上的效果也会有所差别。
| 浏览器 | IE | firefox | chrome | safari | opera |
| 内核 |
Trident |
Gecko |
Webkit |
Webkit |
Presto |
当然，各种浏览器内核在不断更新中，表格只能作为一个简单参考，像Chromium/Bink等内核，还有各种浏览器内核的具体了解，感兴趣的可以上网查查。
因为不同浏览器的不同内核，导致了不同的渲染效果，我们在实际开发中，为了达到一致的效果，所以就出现了兼容性问题。
二、css Hack
css Hack 的目的就是使CSS代码兼容不同的浏览器.
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!-->
例如以上代码：
! :选择条件版本以外的所有版本
.test{ color:#000; /* 正常写法普遍支持 */ color:#00F9; /* 所有IE浏览器(ie6+)支持 */ /*但是IE8不能识别“ * ”和“ _ ” */ [color:#000;color:#0F0; /* SF,CH支持 */ color:#00F ; /* IE8支持*/ *color:#FF0; /* IE7支持 */ _color:#F00; /* IE6支持 */ }
-
“-″减号是IE6专有的hack
-
“9″ IE6/IE7/IE8/IE9/IE10都生效
-
“ ″ IE8/IE9/IE10都生效，是IE8/9/10的hack
-
“9 ″ 只对IE9/IE10生效，是IE9/10的hack
- IE6以下能识别*；不能识别 !important;
- FF不能识别*，但能识别!important;
3 选择器前缀法
* html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */
*html *前缀只对IE6生效*+html *+前缀只对IE7生效。
当然总结的这些不够详细和全面，具体应用还得在实际开发中依据情况而定。
二、css兼容性的相关问题
1、padding 与 margin 问题
不同的浏览器，对默认的margin和padding解析方式不同
解决方案:
body{
margin:0px;
padding:0px;
}
2、居中布局
ff,chrome....通过 margin:auto方式完成块级元素居中显示
ie6及以下，主要通过 text-align:center;方式完成所有元素的居中(包含块级)
body{
margin:auto;
text-align:center;
}
3、元素高度与内容
内容高度超出定义高度后，ie6，自适应，其他浏览器，溢出。
解决方案:
overflow属性;
4、子元素设置上外边距时对父元素的影响
解决方案：
(1)、父元素 加 border
(2)、设置父元素的padding-top取代子元素的margin-top
(3)、参见我的博客中的相关文章有介绍更多方法。
三、CSS3浏览器前缀
我们在用到css3的一些属性时，为了达到浏览器的兼容性，通常会加一些前缀，比如：-webkit-, -ms-等等。
这些前缀其实是浏览器的私有属性。
//浏览器前缀:
-webkit-transform: translateX(x) //Safari and Chrome
-o-transform: translateX(x) //Opera
-moz-transform: translateX(x) //Firefox
-ms-transform: translateX(x) //IE
。。。。。。。
下班啦。拜拜。