解决IE6、IE7、IE8、Firefox兼容最…-优快云博客

本文介绍了用于解决不同浏览器间CSS兼容性的多种CSS Hack方法，包括针对IE6/7/8、Firefox、Safari、Chrome及Opera的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决IE6、IE7、IE8、Firefox兼容最简单的CSS Hack

#someNode
{
position: fixed;支持Firefox
position: fixed\9;支持IE6/7/8
#position:fixed;支持IE7（可能以后的IE8、IE9也是如此，谁知道呢）
*position: fixed;支持IE6/7
_position: fixed;只支持IE6
position: fixed!important; 只有IE6不支持
}

@media all and (min-width: 0px){#someNode{position: fixed;}} 支持Opera

@media screen and (-webkit-min-device-pixel-ratio:0){ #someNode {position: fixed;}} 支持chrome和Safari

补充：

浏览器兼容问题一直以来是前端开发工程师比较头痛的问题，熟悉了里面的规则开发起来也就变得简单了。下面根据自己的使用情况和网上查询的资料简单地归纳一下IE6 / 7 / 8，Firefox，Safari，Chrome和Opera的CSS Hack使用方法。

CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳 - 人生若只如初见 - 云之初的博客

这张表已经列出了一些CSS Hack。下面再具体展开一些：

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

在css样式值后面加上“\9“，如：

p { margin：15px \9；}

这样“margin：15px”属性只有IE6/7/8浏览器能够识别；

CSS Hack2：针对 IE6 和 IE7

在css样式值前加“*”，如：

p {*margin：15px； }

这样“margin：15px”属性只有IE6和IE7浏览器能识别

CSS Hack3：单独针对IE6

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

p {_margin：15px； }

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

CSS Hack4：单独针对IE7

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

p {margin：15px !important； }

这样“margin：15px ”属性只有IE7浏览器能读出来。

CSS Hack5：单独针对IE8

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

p {background: green\0; }

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

CSS Hack6：单独针对Firefox

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

@-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){}，如：

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

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

}

这样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){}，如：

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

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

}

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

其它补充：

1、具体实例补充：

#test{
color:red; color:red!important; _color:red; *color:red; *+color:red; color:red\9; color:red\0; }

body:nth-of-type(1)p{color:red;}

body:nth-of-type(1)，这样写表示全局查找body，将会对应第一个<body>

2、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />