[分享]css兼容性属性有哪些

CSS兼容性属性是指可以在不同的浏览器中使CSS代码得到相同表现效果的一系列CSS属性。由于不同的浏览器对CSS的解析规则不同，导致在同一份CSS代码在不同浏览器中的表现效果不同。使用CSS兼容性属性...

CSS兼容性属性是指可以在不同的浏览器中使CSS代码得到相同表现效果的一系列CSS属性。由于不同的浏览器对CSS的解析规则不同，导致在同一份CSS代码在不同浏览器中的表现效果不同。使用CSS兼容性属性可以在保证浏览器兼容的同时，使得页面的表现效果更加统一。

/*以下是CSS兼容性属性的示例代码*/
/*IE专用hack属性*/
.example {
    color: #000;
    /*IE6及以下*/
    *background-color: #fff;
    /*IE7及以下*/
    _background-color: #fff;
    /*IE6*/
}

/*Firefox专用hack属性*/
@-moz-document url-prefix() {
    .example {
        color: #000;
        background-color: #fff;
        border: 1px solid #000;
    }
}

/*Webkit专用hack属性*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .example {
        color: #000;
        background-color: #fff;
        -webkit-border-radius: 5px;
    }
}

/*Opera专用hack属性*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .example {
        color: #000;
        background-color: #fff;
        border: 1px solid #000;
    }
}

/*所有浏览器通用权重属性*/
.example {
    color: #000!important;
    background-color: #fff!important;
} 

上面的示例代码分别展示了不同浏览器下的CSS兼容性属性，其中IE专用hack属性使用星号和下划线，Firefox专用hack属性使用@-moz-document，Webkit专用hack属性使用-webkit-前缀，而Opera专用hack属性使用min-resolution属性。通用权重属性一般使用!important，以保证所有浏览器都能正确解析该属性。

除了上述示例代码中展示的兼容性属性外，还有一些常用的CSS兼容性属性如下：

/*声明区块*/
@media print {
    /*打印时的样式*/

}

/*支持的格式*/
@font-face {
    /*自定义字体*/

}

/*IE条件判断*/
<!--[if IE]>
    /*只在IE浏览器下显示的样式*/
<![endif]--> 

总的来说，掌握CSS兼容性属性，可以更好地处理浏览器的兼容性问题，让网页在不同浏览器下都能得到完美的表现和渲染效果。