CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳

来源 http://guandian.co/program/css-hack-ie678-firefox-safari-chrome-opera/

网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章，但我觉得太过繁杂，要不给出一张看也看不懂的CSS Hack归纳表，要不就是给出一大堆代码说明问题，不便于学习与使用。我根据自己的使用情况来简单地归纳了一下IE6/7/8, Firefox, Safari, Chrome, Opera的CSS Hack使用方法，希望会对大家有用。

CSS Hack1：把IE6/7/8与其它浏览器区别开来

在css代码属性值后面加上“\9”（不包括双引号），如：

1

2

3

#div {

margin-top:15px\9;

}

*这样“margin-top: 15px”属性只有IE6/7/8浏览器能读出来。

CSS Hack2：针对IE6和IE7

在css代码的属性名称前加“*”（不包括双引号），如：

1

2

3

#div {

*margin-left:15px;

}

*这样“margin-left: 15px”属性只有IE6/7浏览器能读出来。

CSS Hack3：单独针对IE6

在css代码的属性名称前加“_”（不包括双引号），如：

1

2

3

#div {

_width:15px;

}

*这样“width: 15px”属性只有IE6浏览器能读出来。

CSS Hack4：单独针对IE7

在css代码的属性值后面加“ !important”（不包括双引号），如：

1

2

3

#div {

height:18px !important;

}

*这样“height: 18px”属性只有IE7浏览器能读出来。

CSS Hack5：单独针对IE8

在css代码的属性值后面加“\0”（是斜杠加零，不包括双引号），如：

1

2

3

#div {

background:green\0;

}

*这样“background: green”属性只有IE8浏览器能读出来。

CSS Hack6：单独针对Firefox

把针对Firefox的CSS代码写在下面CSS函数的大括号之间
@-moz-document url-prefix(){ /*CSS代码*/  }，如：

1

2

3

@-moz-document url-prefix(){

#main {background:red; }

}

*这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

CSS Hack7：单独针对Opera

把针对Opera的CSS代码写在下面CSS函数的大括号之间
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：

1

2

3

@media alland (-webkit-min-device-pixel-ratio:10000), notall and (-webkit-min-device-pixel-ratio:0){

#content {background:url(http://guandian.co/logo.jpg)no-repeat centertop;}

 }

*这样id号为“content”的Html元素只有在Opera中才会显示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

CSS Hack8：针对Safari和Google Chrome

把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间
@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：

1

2

3

@media screenand (-webkit-min-device-pixel-ratio:0){

#picture {background:url(http://guandian.co/mypic.gif)no-repeat centertop;}

}

*这样id号为“picture”的Html元素只有在Safari和Google Chrome中才会显示出“background: url(http://guandian.co/mypic.gif) no-repeat center top”的效果。但是如果Safari和Google Chrome内核版本不一样的话，CSS显示效果也会有所偏差。

以上是我自己归纳出来的CSS Hack，但是由于本人技术水平有限，还有很多不完整或是不尽合理的地方，请大家提出来，谢谢。