[分享]css兼容浏览器内核

CSS作为一门网页设计必不可少的技术语言，为网页的美观增加了很多可操作性，然而在不同的浏览器内核下，CSS的表现却会有很大不同，这就需要我们学会如何兼容不同的浏览器内核。为了让我们的CSS在各种不同的...

CSS作为一门网页设计必不可少的技术语言，为网页的美观增加了很多可操作性，然而在不同的浏览器内核下，CSS的表现却会有很大不同，这就需要我们学会如何兼容不同的浏览器内核。

为了让我们的CSS在各种不同的浏览器内核下都能表现出一致的效果，我们需要应对以下几个方面：

/* 各种CSS前缀 */
/* 这是WebKit内核浏览器(如Chrome、Safari浏览器、360极速等)使用的前缀 */
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

/* 这是Firefox浏览器使用的前缀 */
-moz-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

/* 这是IE浏览器使用的前缀 */
-ms-border-radius: 5px;
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

/* 各种CSS Hack */
/* 这是只针对IE6使用的Hack */
* html div{ background-color:#f00;}

/* 这是只针对IE6-IE7使用的Hack */
div {background-color:#f009;}

/* 这是只针对IE6-IE8使用的Hack */
div {background-color:#f00  !important;}

/* 这是只针对WebKit内核使用的Hack */
@media screen and (-webkit-min-device-pixel-ratio:0){
    div{background-color:#f00}
}

/* 这是只针对Firefox浏览器使用的Hack */
@-moz-document url-prefix() {
    div {background:#f00!important;}
} 

积极地应对不同浏览器内核的CSS兼容问题，可以为我们的网页增加跨平台性、跨浏览器性，从而提升用户体验和用户满意度。