CSS兼容Chrome和Firefox

news/2024/10/30 23:22:29/

在做页面兼容Chrome和Firefox浏览器时,有时候会由于css样式导致两者显示不一致,比如在Chrome上显示正常,而在Firefox上可能就会出现纵向滚动条,这时候就要针对不同类型浏览器应用不同的css样式了,下面是不同的浏览器CSS hank。

比如一个css样式如下:

.consureBtn {width: 30px;height: 25px;background: #0188fb;border: none;color: white;margin-left: 0px;margin-top:10px;}

使用@media查询可以针对不同的媒体类型定义不同的样式,比如根据不同的屏幕尺寸设置不同的样式。

下面是hank Chrome浏览器的写法:

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {.consureBtn {width: 30px;height: 25px;background: #0188fb;border: none;color: white;margin-left: 0px;margin-top:10px;}
}

下面是hank IE9+版本的写法:

/*IE9+*/
@media all and (min-width:0) {.consureBtn {width: 30px;height: 25px;background: #0188fb;border: none;color: white;margin-left: 0px;margin-top:3px;}
}

下面是hank IE10+版本的写法:

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.consureBtn {width: 30px;height: 25px;background: #0188fb;border: none;color: white;margin-left: 0px;margin-top:3px;}
}

用于定位Gecko(Mozilla Firefox)的 CSS hack是以@-moz-开头的规则,这种规则不是标准规则,是Gecko引擎特定的规则。

/*Firefox*/
@-moz-document url-prefix() {.consureBtn {width: 30px;height: 25px;background: #0188fb;border: none;color: white;margin-left: 0px;margin-top:3px;}
}

比如兼容Chrome和Firefox,在Firefox上可以看到只有@-moz-document url-prefix()的CSS规则是生效的:

参考文档:

https://en.wikipedia.org/wiki/CSS_hack#Browser_prefixes

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

https://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do

 


http://www.ppmy.cn/news/416536.html

相关文章

linux火狐浏览器49.0安装教程,firefox for linux

火狐浏览器是一款免费开源的跨平台浏览器,firefox for linux引入了扩展同步机制用户能够在家用电脑和办公电脑之间进行无缝同步,能给用户更为流畅和高速的上网浏览体验,同时也让开发者能够开发出更为快速的网络应用和网站,有需要的…

FireFox下placeholder设置

<style>/* chrome */input::-webkit-input-placeholder {color: #fff;line-height: 50px;}/* Firefox旧版本*/input:-moz-placeholder {color: #fff;line-height: 50px;}/* Firefox新版本*/input::-moz-placeholder {color: #fff;line-height: 40px;/* Firefox 默认的 pl…

linux下安装Firefox

http://blog.csdn.net/pipisorry/article/details/39480227 一、ubuntu上升级firefox 一、重装升级 #修复或者只安装最新版本&#xff1a; #apt-get --reinstall install packagename #如果你的软件包被破坏了&#xff0c;或者你想要安装一个最新的软件 1. 如果您安装了…

使用firefox color自定义firefox的主题

本说明基于firefox 79 轻量级主题 引用&#xff1a;firefox关于主题的说法&#xff0c;firefox现在仅支持轻量级主题了。 那么什么是轻量级主题呢&#xff1f; mozilla官方并没有明确的定义&#xff0c;我的理解是&#xff0c;轻量级主题的概念是区别于旧的&#xff0c;高度…

STM32 USB HOST IN token包 NAK 处理过程

问题背景&#xff1a; STM32的HAL库&#xff0c;USB HOST协议栈&#xff0c;在接收CDC类BURK数据时&#xff0c;&#xff08;比如串口或者4G设备&#xff09;由于不知道数据什么时候来&#xff0c;所以STM32 USB HOST一直会向总线上发送IN token包&#xff0c;而大部分时候&am…

计算圆周率的 Python 代码

python 版本 3.11 import syssys.set_int_max_str_digits(0)n int(input("请输入想要计算到小数点后的位数:")) # 输入字符转换为整数 t n 10 # 多计算10位&#xff0c;防止尾数取舍的影响 b 10 ** t # 为算到小数点后t位&#xff0c;两边乘以10^t x1 b * 4…

MFC中使用opencv内存泄漏问题-解决

MFC中使用opencv内存泄漏问题-解决 MFC中使用opencv会误报大量内存泄漏&#xff0c;因为是误报&#xff0c;理论上不用管它就可以。 但是运行结束后的大量内存泄漏信息&#xff0c;看着心烦&#xff0c;还可能掩盖真正的内存泄漏&#xff0c;使其无法被发现。 网上找了几个方法…

计算Sharp夏普率的python和c++代码

夏普率&#xff08;The Sharpe ratio&#xff09;&#xff08;预期收益率 - 无风险利率&#xff09;/投资组合标准差 也叫报酬与波动性比率&#xff0c;可能是最常用的投资组合管理度量标准。它采用的方法是&#xff0c;组合中超过无风险利率的那部分收益要用投资组合的标准差…