专业针对FireFox,Chrome,Opera的CSS Hack

在做页面遇到兼容性问题时,我们大多用到的是针对IE的CSS Hack,但有时候做出的页面却偏偏在IE上正常,在火狐或谷歌上却产生了兼容问题,这时该怎么办呢?要是能写个专门针对火狐或谷歌的css样式该多好啊。其实不用发愁,确实有这样的CSS Hack。下面来具体看一下吧

针对火狐浏览器的CSS Hack:

@-moz-document url-prefix() {

.selector {

attribute: value;

}

}

针对webkit内核及Opera浏览器的CSS Hack:

@media all and (min-width:0){

.selector {

attribute: value;/*for webkit and opera*/

}

}

从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来,但并不能区分它们俩,因此我们还需要在上面样式的基础上再加一个样式:

@media screen and (-webkit-min-device-pixel-ratio:0) {

.selector {

attribute: valueForWebKit;/*only for webkit*/

}

}

由于这个样式是针对webkit�?/strong>,会把前面的样式覆盖掉,因此,通过这两个样式就能区分出webkit和opera了,opera的属性值取value,webkit的属性值取valueForWebKit

其实按常规来说,我们一般是处理ie上的兼容问题,但遇到需要处理火狐或Chrome的兼容问题时,一定要先查看网页结构是否合理以及便签使用是否规范,直到迫不得已时再使用上面的CSS Hack

(随着浏览器的更新,以上hack可能会失效,请谨慎使用。

未经允许不得转载:爱前端网 » 专业针对FireFox,Chrome,Opera的CSS Hack

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏