1、什麼是CSS hack? CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什麼樣的瀏覽器識別什麼樣的符號是有標準的,CSS hack就是讓你記住這個標準),以達到應用不同的CSS樣式的目的,比如.kwstu{width:300px;_width:200px;
1、什麼是CSS hack?
CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號
(什麼樣的瀏覽器識別什麼樣的符號是有標準的,CSS hack就是讓你記住這個標準),以達到應用不同的CSS樣式的目的,
比如.kwstu{width:300px;_width:200px;}
一般瀏覽器會先給元素使用width:300px;的樣式,緊接著後面還有個_width:200px;
由於下劃線_width只有IE6可以識別,所以此樣式在IE6中實際設置對象的寬度為200px,後面的把前面的給覆蓋了,
而其他瀏覽器不識別_width不會執行_width:200px;這句樣式,所以在其他瀏覽器中設置對象的寬度就是300px;
2.CSS hack解決問題
CSS hack用來解決有些css屬性在不同瀏覽器中顯示的效果不一樣的問題, 如margin屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍,也就是說margin-left:20px;在ie6中距左側對象的實際顯示距離是40px,而在非ie6中顯示的距左側對象的距離是設置的值20px; 所以要想設置一個對象距離左側對象的距離在所有瀏覽器中都顯示是20px的寬度的樣式應為:.kwstu{margin-left:20px;_margin-left:20px;}。
3、瀏覽器識別字元標準對應表
從上圖可以分析出以下幾種情況:
1.大部分特殊字元IE瀏覽器支持,其他主流瀏覽器firefox,chrome,opera,safari不支持 (opera可識別除外)。 2.\9 :所有IE瀏覽器都支持 3._和- :僅IE6支持 4.* :IE6、E7支持 5.\0 :IE8、IE9支持,opera部分支持 6.\9\0 :IE8部分支持、IE9支持 7.\0\9 :IE8、IE9支持
所以我們可以把順序寫成這樣:(這也是相容各大主流游覽器的彙總)
.element{
color:#000; /*w3c標準*/
[;color:#f00;]; /*Webkit(chrome和safari)*/
color:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/
}
:root .element{color:#0f0\9;} /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) {
.element{color:#336699;}
} /*opera*/
@-moz-document url-prefix(){
.element{color:#f1f1f1;}
} /*Firefox*/
(1)清除浮動
在Firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的HACK來對父級做一次定義,那麼就可以解決這個問題。
select:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }