CSS兼容Chrome和Firefox

在做页面兼容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

CSS兼容Chrome和Firefox相关推荐

自定义浏览器滚动条样式（兼容chrome和firefox）
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我,解锁前端成长新姿势. 以下正文: 问题描述浏览器默认的滚动条样式太丑了,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一,必 ...
CSS 滚动条样式【兼容chrome、Firefox、IE】
css滚动条样式,windows系统下,滚动条比较丑,以下分别是chrome.Firefox.IE5.5+三大浏览器的改写方法. Chrome: 原理:通过-webkit相关属性直接可以灵活控制滚动条 ...
【兼容Chrome和Firefox】浏览器滚动条美化
问题浮现对于项目系统的美化处理,除了UI设计稿与组件自定义设计,对于浏览器滚动条的美化也是必要的,谁也不想自己的界面和布局都设计得很完美,结果出现了下图的滚动条吧那接下来我们实现一下类似cnblo ...
关于CSS兼容IE与Firefox要点分析
原文引用:http://blog.sina.com.cn/u/4a46bf5b010009ei 发现很多站点对Firefox的兼容性不是很好,往往导致页面排版混乱的现象,尤其是WEB2.0火热的今天, ...
IE浏览器即将“退役”，银行、学校的老网站们如何兼容Chrome、Firefox和360等浏览器？
微软公司在2021年5月19日突然宣布: 自2022年6月15日起,大多数版本的Windows 10系统将不微软公司在2021年5月19日突然宣布: 自2022年6月15日起,大多数版本的Window ...
让CSS兼容IE和Firefox的技巧集合
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
Win10 不火不行！Edge 无缝兼容 Chrome扩展
微软已经兑现了承诺,对于IE的继任者Edge浏览器,扩展应用页面已经上线,现在Insider会员可静待下一个版本更新进行尝鲜. 我们看到首批的扩展有三款,分别是微软翻译,鼠标手势以及reddit扩展, ...
input file本地图片预览的方法（兼容IE、Chrome和Firefox）
JS兼容各个浏览器的本地图片上传即时预览效果 2014-02-26 我来说两句收藏我要投稿很早以前在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是go ...
PC端各浏览器布局兼容问题【Chrome、Firefox、IE】——长期更新
1.Firefox.IE8下属性为"readonly"的表单元素获得焦点会有光标'I'进去. 解决办法:/(ㄒoㄒ)/~~ 2.IE不支持HTML5标签解决办法:CSS中添加如下 ...

CSS兼容Chrome和Firefox

CSS兼容Chrome和Firefox相关推荐

最新文章

热门文章