如何解决IE系列浏览器内部的CSS兼容问题？
我们都知道IE浏览器与FF、Chrome等标准浏览器对于CSS存在很多的兼容问题，但是实际上IE内部不同版本之间也存在这些问题，请问有什么方法处理该类问题？另外有没有办法为特定类型的浏览器（不光是IE）定制CSS？
我狠重口味
12 years, 6 months ago
Answers
查找了很多资料，终于发现了一个区别IE系列浏览器的hack：
.box{
background:red; /* 所有浏览器 */
background:orange\9; /* 所有IE浏览器 */
*background:yellow; /* IE7和IE6 */
+background:green; /* IE7 */
_background:blue; /* IE6 */
}
而要为特定浏览器定制CSS，需要用到" 选择符前缀法 "， 它的原理就是在才CSS选择符前加一些特定浏览器才能识别的前缀，从而让某些样式只对特定浏览器生效 ：
/* Opera */
html:first-child #opera { display: block; }
/* IE 7 */
*:first-child+html{background-color: #F00;}
/* IE 7 */
html > body #ie7 { *display: block; }
/* IE 6 */
* html #div{ background-color: #F00;}
/* IE 6 */
body #ie6 { _display: block; }
/*IE7及其更低版本*/
*:first-child+html{}*html{}
/*IE7,IE7以上和主流浏览器*/
html>body{}
/*适合主流浏览器(IE7排除在外，IE7以下的也不行)*/
html>/**/body{}
/* Firefox 1 - 2 */
body:empty #firefox12 { display: block; }
/* Firefox */
@-moz-document url-prefix() { #firefox { display: block; } }
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } }
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block; } }
资料地址： http://blog.moocss.com/tutorials/html5-css3-tutorials/1577.html
@小白 补充：
天使翼之向
answered 12 years, 6 months ago