css hack 瀏覽器兼容問題

1、先說說各類主流瀏覽器的內核

瀏覽器最重要或者說核心的部分是「Rendering Engine」，可大概譯爲「渲染引擎」，不一樣的瀏覽器內核對網頁編寫的解釋也不一樣，反映在網頁上的效果也會有所差異。

瀏覽器 　IE firefox chrome safari opera
內核
Trident
Gecko
Webkit
Webkit
Presto

固然，各類瀏覽器內核在不斷更新中，表格只能做爲一個簡單參考，像Chromium/Bink等內核，還有各類瀏覽器內核的具體瞭解，感興趣的能夠上網查查。

由於不一樣瀏覽器的不一樣內核，致使了不一樣的渲染效果，咱們在實際開發中，爲了達到一致的效果，因此就出現了兼容性問題。

2、css Hack

　　css Hack 的目的就是使CSS代碼兼容不一樣的瀏覽器.

　　大體有3種表現形式：
CSS類內部Hack好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * ".
選擇器Hack:好比 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
HTML頭部引用(if IE)Hack:針對全部IE： <[endif]-->條件註釋法等.
　　書寫順序，通常是將識別能力強的瀏覽器的CSS寫在後面。
下面是一些經常使用的CSS Hack方法
1 條件註釋法




例如以上代碼：

表示若是是IE瀏覽器的話就執行寫在裏面的代碼，不是的話就不執行。
　　gt ：表明大於；
　　lt : 表明小於；
　　gte : greater than or equal
　　lte : less than or equal
　! :選擇條件版本之外的全部版本
例如：<!--[if lt IE 7]> 就表明若是是IE7如下的版本。
2 類內屬性前綴
在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展示效果。例如：
複製代碼
.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生效。

固然總結的這些不夠詳細和全面，具體應用還得在實際開發中依據狀況而定。

2、css兼容性的相關問題

一、padding 與 margin 問題
不一樣的瀏覽器，對默認的margin和padding解析方式不一樣
解決方案:
body{
　　margin:0px;
　　 padding:0px;
}
二、居中佈局
ff,chrome....經過 margin:auto方式完成塊級元素居中顯示
ie6及如下，主要經過 text-align:center;方式完成全部元素的居中(包含塊級)
body{
　　 margin:auto;
　　text-align:center;
}
三、元素高度與內容
內容高度超出定義高度後，ie6，自適應，其餘瀏覽器，溢出。
解決方案:
overflow屬性;
四、子元素設置上外邊距時對父元素的影響
解決方案：
(1)、父元素 加 border
(2)、設置父元素的padding-top取代子元素的margin-top

　　(3)、參見個人博客中的相關文章有介紹更多方法。

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