IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

来源：互联网发布：卷积神经网络十大算法编辑：程序博客网时间：2024/05/29 04:20

今日整理网站的 CSS 的时候发现我的网站在 Firefox下面出现了变形的情况,这个时候我急啊.

我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSS hack十分了解了，现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣，可苦了我们这些Web前端开发人员了。

我在这里稍微整理了一下前面了解的各浏览器的CSS hack，打包奉献一下，哈哈。

各浏览器CSS hack兼容表：

IE6IE7IE8FirefoxChromeSafari!important Y Y _Y *YY *+ Y /9YYY /0 Y nth-of-type(1) YY

代码示例：

#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red/9; /* IE6、IE7、IE8支持 */
color:red/0; /* IE8支持 */
}

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例：

.test{
color:#000000;
color:#0000FF/0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

其他说明：

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

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

3、还有其他写法，比如：
*html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：

http://www.w3.org/TR/html4/loose.dtd

5、顺序：Firefox、IE8、IE7、IE6依次排列。

小知识：什么是CSS hack？

由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

CSS Hack 兼容浏览器经验分享

Mar 17th, 2009 Translate Leave a comment Go to comments

由于 Firefox 的崛起和 IE 兄弟们的各自为政, CSS Hack 再次得到网页制作人员的重视. 兼容浏览器对初学者来说绝对是一个苦活, 我的一些朋友就是因为烦这个没能坚持下来, 很是可惜.

目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担. 玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.

开发平台的选择

我很幸运, 我接触网页前台的时候 Firefox2 已经十分红火, 我的所有工作都是在 Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以我推荐以 Firefox 结合 Firebug 扩展作为平台.

Hack 的顺序

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他

Hack 的方法

说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.

1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.

#bgcolor {background:red !important; /* Firefox 等其他浏览器 */background:blue; /* IE6 */}*+html #bgcolor {background:green !important; /* IE7 */}

IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.

上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).

2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.

<!-- 放置所有浏览器的样式 --><link rel="stylesheet" href="style.css" type="text/css" /><!-- 只放置 IE 必须的, 而不能通过 W3C 的代码 --><!--[if IE]><link rel="stylesheet" href="style_ie.css" type="text/css" /><![endif]-->

浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法, 但以上就是我用过的全部.

网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就永远不会过时 (IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.