css hack（ie6-9,firefox,chrome,opera,safari）

来源：http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html

在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。

为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直接上代码

<!DOCTYPE html>
<html>
<head>
    <title>Css Hack</title>
    <style>
    #test
    {
        width:300px;
        height:300px;

        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>
</head>
<body>
    <div id="test">test</div>
</body>
</html>

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

background-color:blue; 各个浏览器都认识，这里给firefox用；

background-color:red\9;\9所有的ie浏览器可识别；

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

+background-color:pink; + ie7定了；

_background-color:orange; _专门留给神奇的ie6；

:root #test { background-color:purple\9; } :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 {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

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

css hack（ie6-9,firefox,chrome,opera,safari）相关推荐

[乐意黎原创] JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本
JS根据浏览器的useAgent来判断浏览器的类型. userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. javascript语法:navigator.us ...
CSS hack:区分IE6 IE7 Firefox
区别不同浏览器,CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !impor ...
CSS HACK 区别 IE6、IE7、IE8、Firefox兼容性
转载链接:http://developer.51cto.com/art/201009/226787_1.htm 本文向大家描述一下如何使用CSS HACK区别IE6.IE7.IE8.Firefox兼容 ...
CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...
iframe高度自适应（IE6+、FF、Opera、Chrome等测试通过）
在主页面中对于嵌入的iframe页面高度未知,而且iframe页面的高度也不定,故不能在主页面中通过DOM来控制高度.在iframe页面中加入以下脚本便可实现: /* iframe 高度自适应脚本(I ...
ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条
需要jquery库支持代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
区分各浏览器的CSS hack(包括360、搜狗、opera)
虽然说使用css hack来解决页面兼容性bug并不是个好办法,但是有时候这些hack还是用的着的,比如你接受了一个二手或是三手的遗留界面,杂乱无章的css代码,只在某个浏览器下有兼容bug,而且需要 ...
CSS兼容性（IE和Firefox）技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

css hack（ie6-9,firefox,chrome,opera,safari）

css hack（ie6-9,firefox,chrome,opera,safari）相关推荐

最新文章

热门文章