針對不同瀏覽器核心css寫法
/*針對谷歌瀏覽器核心支援的CSS樣式*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
樣式
}
/*針對IE6特製識別的CSS樣式*/
*HTML .SearchBox
{
樣式
}
/*針對IE7特製識別的CSS樣式*/
*+HTML .SearchBox
{
樣式
}
針對Firefox瀏覽器的核心CSS寫法:
@-moz-document url-prefix() {
.font1 {color:red}
}
IE8就是自己來除錯了。除錯一個瀏覽器,有不合適的地方可以在該核心css中重寫對應的方法,只需把不合適的樣式重寫即可實現。*HTML中則例外,需要每重寫一個都要加*HTML單獨處理。
針對樣式名
如果只讓ie6看見用*html .head{color:#000;}
如果只讓ie7看見用*+html .head{color:#000;} (*margin-top:-425px;//ie7專用)
(margin-top:-425px\0;//ie8專用)
如果只讓ff看見用:root body .head{color:#000;}
如果只讓ff、IE8看見用html>/**/body .head{color:#000;}
如果只是不讓ie6看見用html>body .head{color:#000;} 即對IE 6無效
如果只是不讓ff、IE8看見用*body .head{color:#000;} 即對ff、IE8無效
針對具體屬性
如果只讓ie6看見用"_": .head{_color:#000;}
如果只讓ie7看見用"+"與"_"結合的方法: .head{+color:#f00;!;_color:#000;}
IE8正式版hack
\9″ 例:”margin:0px auto\9;”.這裡的”\9″可以區別所有IE8和FireFox.
“*” IE6、IE7可以識別.IE8、FireFox不能.
“_” IE6可以識別”_”,IE7、IE8、FireFox不能.
如:
.a {color:#f00; color:#f60\9; +color:#00FF00; _color:#0000FF; }
從左到右分別對應 FF,IE8 IE7 IE6
=============================
P{+color:#f00;} 支援 IE7 IE6 不支援 FF IE8b
P{_color:#f00;} 支援ie6 不支援 FF
P{color:#f00; !important;}
P{color:#f00;} 支援 IE6 IE7 IE8b FF
P{color:#00f !important;color:#f00; } 支援IE7 IE8b FF 不支援IE6
head:first-child+body p{color:#f00;} 支援IE7 IE8b FF 不支援IE6
/*\*//*/
/**/ 支援IE8b 不支援IE6 IE7 FF
html*{color:#f00} 支援IE6 IE7 不支援 IE8b FF
body>p{color:#f00} 支援IE7 IE8b FF 不支援 IE6
html[xmlns] p {color:#f00} 支援 IE7 IE8b FF 不支援 IE6
@import "style.css"
@import "style.css"
@import url(style.css)
@import url('style.css')
@import url("style.css") 支援 IE6 IE7 IE8b FF
P{/*/*color:#f00;/* */} 支援 IE6 IE7 FF 不支援 IE8b