堅持每天做總結
。今天下班還算早。寫個跟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:#00F\9; /* 所有IE瀏覽器(ie6+)支持 */ /*但是IE8不能識別“ * ”和“ _ ” */ [color:#000;color:#0F0; /* SF,CH支持 */ color:#00F\0; /* IE8支持*/ *color:#FF0; /* IE7支持 */ _color:#F00; /* IE6支持 */ }
-
“-″減號是IE6專有的hack
-
“\9″ IE6/IE7/IE8/IE9/IE10都生效
-
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
-
“\9\0″ 只對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
。。。。。。。
下班啦。拜拜。