[13年迁移]firefox and chrome css compatible

firefox:
a标签需要指定display:block;,才可以设置长宽,不然无效

chrome:

common:
这个最全,还要加一个
 @-moz-document url-prefix(){
 
 }火狐专有

还要加一个!important的正确理解,其他浏览器参考w3c,在ie6下不能覆盖前面声明的css类,但是可以覆盖内联css(就是元素style里的),是可以用的

ie系列还可以用*号貌似

上面这段代码大家可以直接copy出来,保存成html在各浏览器试试。下面我来分析下:

各个浏览器都认识,这里给firefox用;

\9所有的ie浏览器可识别;

\0 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;

+ + ie7定了;

_ _专门留给神奇的ie6;

:root #test { } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple\0;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}

@media all and (min-width:0px){ #test {background-color:black\0;} }
这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后这个是浏览器新贵chrome和safari的。

好了就这么多了,特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范,我们平时写css最好是按照标准来,这样对我们以后维护也是大有好处的,实在不行再用。

时间: 2024-10-20 03:25:20

[13年迁移]firefox and chrome css compatible的相关文章

[13年迁移]firefox获取隐藏表单元素的parent节点的bug

getXY : function(element){        var y = element.offsetTop;        var x = element.offsetLeft;        while(element = element.offsetParent){            y += element.offsetTop;            x += element.offsetLeft;        }        return (new Array(x,y

CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera

今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器.如图所示: 下面就来看一下代码吧: html部分: 1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="content">     <div class="test"></div>     <div class=&

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器 现在的浏览器IE6-IE10.Firefox.Chrome.Opera.Safari...数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了.今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS H

浏览器HTTP_USER_AGENT汇总——Firefox、Chrome、IE9、IE8、IE7、IE6

结论:  浏览器 \ OS XP(IE6) XP(IE7) XP(IE8) Win7 x64(IE9) 猎豹浏览器2.0急速模式     Chrome/21 猎豹浏览器2.0兼容模式 IE6     IE9 淘宝浏览器2.0急速模式     Chrome/20 淘宝浏览器2.0兼容模式 IE6     IE7 QQ浏览器7.0 IE6     IE9 360安全浏览器5.0 IE6     IE7 360安全浏览器5.0自带IE8内核版 IE7 / IE8     IE7  360急速浏览器6.

[Python爬虫] Selenium自动访问Firefox和Chrome并实现搜索截图

前两篇文章介绍了安装,此篇文章算是一个简单的进阶应用吧!它是在Windows下通过Selenium+Python实现自动访问Firefox和Chrome并实现搜索截图的功能.        [Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)        [Python爬虫] 在Windows下安装PIP+Phantomjs+Selenium 自动访问Firefox 可以参照前文安装Selenium环境,目前Selenium这个用于Web应用程序测试

firefox和chrome实现页面打印自动分页

在Firefox和chrome中直接调用打印功能的js方法是 window.print(); 但是如果页面很长,那么就需要分页,这时只需要在页面中添加css属性即可,如果想自动分页,则如下所示 <style type="text/css" media="print"> div { page-break-after:auto; page-break-inside:auto; page-break-before:auto; } </style>

Firefox、chrome下隐藏表格行不能使用block

Firefox下隐藏表格行不能使用block 如下一段代码,在IE下能正常执行,但在Firefox下执行却有点不正常:<script language="javascript">function TestBlack(TagName){var obj = document.getElementById(TagName);if(obj.style.display=="block"){   obj.style.display = "none"

JavaScript的history.back()在FireFox和Chrome无效解决办法

今天在做一个app测试时需要用到返回上一级来源页面的一个功能了,但测试了history.back()之后发现在ie有效在FireFox和Chrome无效,下面我们来看问题如何解决. 最初写法是history.back()如下 htm <div class="btn1"><a href="#" id="calcelbtn">取消</a></div> js代码 $('#calcelbtn').click

Ubuntu上让Firefox使用Chrome最新版PepperFlash插件

Adobe Flash Player 11.2 将是支持 Linux 平台的最后一个版本. Adobe 只继续为 Flash Player 11.2 for Linux 提供安全更新,而不提供版本更新. Linux上为Firefox添加Flash Player支持也非常简单. 下载Adobe为Linux提供的tar.gz包: https://get.adobe.com/cn/flashplayer/ 把压缩包里的libflashplayer.so复制或软链接到/usr/lib/mozilla/p