1. 程式人生 > >針對不同瀏覽器核心css寫法

針對不同瀏覽器核心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