CSS Hack 總結大全

2020-03-24 18:46:30

字體：大中小

來源：轉載

供稿：網友

瀏覽器越來越多，不同的瀏覽器，不同的版本在頁面的渲染上都各不相同。這讓網頁開發人員很頭疼，為了能兼容各個瀏覽器，人們挖掘出了很多 CSS Hack。下面進行一下總結，如果還有其他的 CSS Hack 歡迎提供。
一) 針對 IE 的 Hack大部分 CSS Hack 都是針對 IE 的，這是用于我們的 IE “堅強”所致，尤其是 IE6。#test {
color:red; /*所有瀏覽器*/
+color:blue; /*所有 IE */
_color:green; /*IE 6及以下*/
_color /**/:pink; /*IE 5*/
}
由于 CSS 是后面的覆蓋前面的。所以以上 CSS 分別對應非IE，IE7,8，IE6，IE5。以上 Hack 基本可以滿足需求。
不過 IE 還有一些其他的 Hack。
/9 Hack:#test {
color:red; /*所有瀏覽器*/
+color:blue/9; /*IE 5 以上*/
}在屬性后面加個 “/9″ 就可以了。你可能會奇怪：其他的數字不行嗎？我試了下，好像是不行，不過 9 前面可以加幾個 0。我覺得這個不必深究，能用就行了。
* html Hack:#test { /*所有瀏覽器*/
color:red;
}
* html #test { /*IE 6及以下*/
color:blue;
}這個 Hack 用于區分 IE6 和其他瀏覽器。在 CSS 屬性比較多的情況下比較有用。值得一提的是，這個 Hack 是符合標準的。
[xmlns] Hack:剛剛的 “* html” Hack 是 IE6及以下支持，其他瀏覽器不支持。 “[xmlns]” Hack 剛好相反。[xmlns] #test { /*IE 6及以下不支持*/
color:green;
}注意：這個 Hack 要求HTML 必須要有 !DOCTYPE 頭部以及 html 有xmlns屬性才會起作用。不過這個問題似乎不大，現在絕大部分網頁都有這兩個東東，包括 Dreamweaver 默認新建的網頁都會自動加上
Mac 下 IE Hack:/*/*//*/
#test {
color:blue;
}
/**/二) 針對 Gecko(Firefox, Netscape) 的 Hack@-moz-document url-prefix(){
#test {
color:yellow;
}
}包含在 @-moz-document url-prefix(){} 之間的 CSS 只有 Gecko 內核的瀏覽器才會支持。所以對于 Firefox 可以用這個 Hack。
三) 針對 KHTML(Chrome, Safari), Opera 的 Hack@media screen and (-webkit-min-device-pixel-ratio:0) {
#test {
color:blue;
}
}Chrome, Safari, Opera 支持以上代碼，而其他瀏覽器不支持。
四) 針對 Opera 的 Hack
第一種方法@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#test {
color:#99ff99;
}
}包含在 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {} 之間的 CSS 只有 Opera 才能解析。
第二種方法body:empty #test {
color:yellow;
}以上 Hack 基本能區別大部分瀏覽器。不過我覺得 Hack 能不用最好還是別用，除非非用不可。因為 Hack 太多，管理起來也是個麻煩事。如果就差幾個像素也沒什么。對于一些市場占有率很小的瀏覽器只要做到不亂，功能可用就可以了。我們需要的是在主流瀏覽器中達到最好效果
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS層疊樣式主次順序

下一篇：XHTML+CSS寫出正規的BLOG