针对不同浏览器内核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
发表评论
验证码: 点击我更换图片