各种浏览器兼容篡位的css样式写法

最新推荐文章于 2020-08-18 23:22:37 发布

转载最新推荐文章于 2020-08-18 23:22:37 发布 · 275 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/bq-blog/archive/2011/05/11/2043347.html

本文详细介绍了如何针对不同浏览器内核编写特定的CSS样式，包括谷歌浏览器、IE6、IE7、IE8及Firefox的特制CSS写法，确保网页在各种浏览器下的一致性和兼容性。

/*针对谷歌浏览器内核支持的CSS样式*/
@media screen and (-webkit-min-device-pixel-ratio:0) {

样式

}

/*针对IE6特制识别的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;}
如果只让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
还有写css样式一定要记住顺序：