CSS3hacks是一系列常用的CSS hacks,可以帮助开发人员解决不同浏览器上出现的CSS兼容性问题。下面是一些常用的CSS3hacks技巧。
/*1.只针对Firefox浏览器*/
@-moz-document url-prefix() {
/*Firefox浏览器下的CSS样式*/
}
/*2.只针对Safari和Chrome浏览器*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*Safari和Chrome浏览器下的CSS样式*/
}
/*3.只针对Opera浏览器*/
@media screen and (-o-min-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {
/*Opera浏览器下的CSS样式*/
}
/*4.IE6专用*/
* html .example {
/*IE6下的CSS样式*/
}
/*5.IE7专用*/
*+html .example {
/*IE7下的CSS样式*/
}
/*6.IE6、IE7通用*/ .example {
/*IE6、IE7下的CSS样式*/
} /*7.IE8专用*/
.example {
/*IE8下的CSS样式*/
color: #000\0/; /*加\0/兼容IE8及以下版本*/
}
/*8.IE9专用*/
:root .example {
/*IE9下的CSS样式*/
}
/*9.IE10+专用*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/*IE10+下的CSS样式*/
}这些CSS3hacks技巧可以帮助我们实现不同浏览器下的CSS样式兼容性。但是需要注意的是,过多使用CSS hack会导致代码冗长且难以维护。因此在实际开发中,建议尽量避免使用CSS hack,而是采用更加灵活可靠的CSS编码方式。
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did245861