解决IE6、IE7、IE8、Firefox兼容最…

来源：互联网发布：caffe ssd图像预处理编辑：程序博客网时间：2024/05/03 17:28

解决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使用简要归纳 - 人生若只如初见 - 云之初的博客

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

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

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

p {margin：15px \9；}

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

CSSHack2：针对 IE6 和 IE7

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

p{ *margin：15px； }

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

CSSHack3：单独针对IE6

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

p{ _margin：15px； }

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

CSSHack4：单独针对IE7

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

p{ margin：15px !important； }

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

CSSHack5：单独针对IE8

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

p{ background: green\0; }

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

CSSHack6：单独针对Firefox

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

@-moz-documenturl-prefix(){ #main { background:red; }

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

CSSHack7：单独针对Opera

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

@mediaall 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-repeatcenter top; }

}

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

CSSHack8：针对Safari和Google Chrome

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

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

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

}

这样id号为“picture”的Html元素只有在Safari和GoogleChrome中才会显示出“background: url(http://guandian.co/mypic.gif) no-repeatcenter top”的效果。但是如果Safari和GoogleChrome内核版本不一样的话，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的网站上添加一行代码即可解决问题，此代码如下：
<metahttp-equiv=”x-ua-compatible” content=”ie=7″/>