博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 兼容性问题,针对单个浏览器
阅读量:4654 次
发布时间:2019-06-09

本文共 642 字,大约阅读时间需要 2 分钟。

针对火狐浏览器的CSS Hack:

@-moz-document url-prefix() { .selector { attribute: value; }}

2

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

@media all and (min-width:0){ .selector { attribute: value;/for webkit and opera/ }}

3

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

@media screen and (-webkit-min-device-pixel-ratio:0) { .selector { attribute: valueForWebKit;/only for webkit/ }}

4

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

5

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

转载于:https://www.cnblogs.com/liu201312/p/9146441.html

你可能感兴趣的文章
SQL视频总结
查看>>
P4878 道路修建-美国
查看>>
dp练习
查看>>
vim
查看>>
maze_travel的隐私声明
查看>>
对正则表达式又重新学了一遍,笔记方便以后查阅
查看>>
UIKit应用 - Swift 版本: 3.让UITableViewCell的背景色渐变
查看>>
Java反射
查看>>
building tool
查看>>
JS中for循环输出三角形
查看>>
字节对齐2
查看>>
与Win8之磁盘活动时间100%斗争心得
查看>>
Matrix: android 中的Matrix (android.graphics.Matrix) (转)
查看>>
Android中处理崩溃异常
查看>>
Day7—socket进阶
查看>>
只读数据文件损坏恢复
查看>>
转过来的,可以看下
查看>>
windows搭建SVN服务MD版
查看>>
Java私塾的一些基础练习题(一)
查看>>
Shell 07 项目案例
查看>>