css 关于浏览器兼容性列表

1 !important

• IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。例如：

div { color: #f00 !important; color: #000; }

在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

• 解决方法

 div { color: #f00 !important; } div { color: #000; }

在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00
2 @media

• IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。

/* 本条为CSS2部分，IE8及以下只支持本条 */
@media screen {
	body{ color: #f00; }
}
/* 下列为CSS3部分 */
@media screen and (min-width: 960px) {
	body{ background: #999; }
}
@media screen and (device-width: 1024px) {
	.test { display: block; }
}
@media screen and (width: 1024px) {
	.test2 { display: block; }
}

• 一些常用

@media all and (width:1024px){ body{color:#f00;} } 
@media all and (device-height:800px){ … } 
@media all and (orientation:landscape){ … } 
@media all and (device-aspect-ratio:16/10){ … } 
@media all and (min-color:1){ … } 
@media all and (monochrome:0){ … } 
@media all and (grid:0){ … }