分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

css 兼容性问题,针对单个浏览器

发布时间:2023-09-06 01:58责任编辑:沈小雨关键词:浏览器

针对火狐浏览器的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。

css 兼容性问题,针对单个浏览器

原文地址:https://www.cnblogs.com/liu201312/p/9146441.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved