CSS Hack

第一种：IE条件式

　　因为IE对CSS的解析存在很多的问题，所有我们的CSS hack 大部分都是针对IE的。还有就是官方也有自己的CSS hack，那么看代码吧！

<!--[if IE]>

<![endif]-->

这样就可以为IE加载定义好的CSS文件了。

我们还可以为不同的IE版本加载不同的CSS文件，例如：

<!--[if IE 6]>

<![endif]-->

如果我们想按照一定范围版本的IE进行hack，我们可以结合一些关键字来搞定。

lte 小于等于

lt 小于

gte 大于等于

gt 大于

! 表示不等于

具体的例子就不弄了，大同小异，有兴趣的可以试试。

这种方式的不仅对加载link标签有作用，而且对js、style等也是有作用的。

第二种：选择前缀式

　　这种方式还是挺常见的，就是在css 选择符前加一些只有特定的浏览器才能识别的前缀，例如 *html 只对IE6有效、*+html只对IE7有效。当然这种方式看似挺不错的，但是保不齐那天微软在后面的浏览器也识别了，那就有点惨了，所以还是第一种方式比较保险。

　　ps：*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

第三种：样式属性前缀式

　　这种方式的hack更常见，就是在样式属性下面加前缀，这样这些属性只有在特定的浏览器上才有效。例如 _ 只在 IE6 生效、* 只在IE6和IE7下生效。

　　区别IE6与FF：
        　　background:orange;*background:blue;
　　区别IE6与IE7：
       　　 background:green !important;background:blue;
　　区别IE7与FF：
      　　 background:orange; *background:green;
　　区别FF，IE7，IE6：
        　　background:orange;*background:green !important;*background:blue;

　　ps：IE都能识别*;标准浏览器(如FF)不能识别*；

　　IE6能识别*，但不能识别 !important,
　　IE7能识别*，也能识别!important;
　　FF不能识别*，但能识别!important;

在理论上来说条件选择的那个方式最好用，但是那个东西不利于开发和维护，所以后面那两种比较流行，当然也都存在一定的向后兼容风险，这个要看具体情况了。

原文链接：http://www.cnblogs.com/iloveiknow/archive/2011/11/22/2259040.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最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

原文链接：http://www.cnblogs.com/wuqiang/archive/2011/08/23/2150240.html

posted on 2012-07-18 17:23 dragonstreak_1 阅读(203) 评论(0) 编辑收藏举报

刷新页面返回顶部

品记

CSS Hack

公告

导航