织梦58网络淘宝旗舰店,我们不求千篇一律,我们追求创新,哪怕形式上的创新。服务热线:400-088-8899

教大家css_hack简单写法与兼容性介绍

作者:admin浏览次数:发布时间:2013-05-24 19:43
【内容提要】在网站建站的过程中,许多朋友问如何做好页面的兼容问题。 那么今天就为大家讲解下,在IE6 IE7 IE8 IE9 FF等主流浏览器下面兼容的CSS hack写法

区别不同浏览器的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的写在最后面。
实例
 
 
 代码如下 复制代码
 
<!DOCTYPE html> 
<html> 
<head> 
    <title>IMYUAN.COM Css Hack</title> 
    <style> 
    #test  
    {  
        width:300px;  
        height:300px;  
         
        background-color:blue;      /*firefox 火狐浏览器*/
        background-color:red9;      /*all ie 所有版本IE浏览器*/
        background-color:yellow;    /*ie8 IE8浏览器*/
        +background-color:pink;        /*ie7 IE7浏览器*/
        _background-color:orange;       /*ie6 IE6浏览器*/
    } 
    :root #test { background-color:purple9; }  /*ie9 IE9浏览器*/
    @media all and (min-width:0px){ #test {background-color:black;} }  /*opera 欧鹏游览器*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari 谷歌浏览器和safari浏览器*/
    </style> 
</head> 
<body> 
    <div id="test">test</div> 
</body> 
</html>
 
上面这段代码大家可以直接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-width:0px){ #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-width: 480px) { .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;

通过以上的简单介绍和讲解,相信大家已经对CSS hack有了更进一步的了解!



回到顶部