常用的css hack简单写法与兼容性介绍

作者:袖梨 2022-06-25

区别不同浏览器的CSS hack写法:

区别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;

注:IE都能识别*;标准浏览器(如FF)不能识别*;

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

  IE6 IE7 FF
* √ √ ×
!important × √ √


------------------------------------------------------
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。

  IE6 IE7 FF
* √ √ ×
!important × √ √
_ √ × ×

 

于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

实例

 

 代码如下 复制代码

 

 

 

    Css Hack 

     

 

 

   

test
 

 

上面这段代码大家可以直接copy出来,保存成html在各浏览器试试。下面我来分析下:
    background-color:blue; 各个浏览器都认识,这里给firefox用;
    background-color:red9;9所有的ie浏览器可识别;
    background-color:yellow; 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,我们就认为是给ie8留的;
    +background-color:pink; + ie7定了;
    _background-color:orange; _专门留给神奇的ie6;
    :root #test { background-color:purple9; } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}
    @media all and (min-){ #test {background-color:black;} } 这个是老是跟ie抢着认的神奇的opera,必须加个,不然firefox,chrome,safari也都认识。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

下面再看一些常用的

.all-IE{property:value9;}
:root .IE-9{property:value/;}
.gte-IE-8{property:value;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-) { .iphone-or-mobile-s-webkit{property:value;} }


IE8 最新css hack:   "9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.   "" IE8识别,IE6、IE7不能.   "*" IE6、IE7可以识别.IE8、FireFox不能.   "_" IE6可以识别"_",IE7、IE8、FireFox不能.  
IE6 hack
  _background-color:#CDCDCD; /* ie 6*/
IE7 hack
  *background-color:#dddd00; /* ie 7*/
IE8 hack
  background-color:red ; /* ie 8/9*/
IE9 hack
  background-color:blue 9;

相关文章

精彩推荐