教大家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有了更进一步的了解！
通过以上的简单介绍和讲解，相信大家已经对CSS hack有了更进一步的了解！