CSS兼容性一直是让人很头疼的问题,我现在都不知道是应该痛恨谁了,IE?FF?标准?如果世界是统一的,我们该少死多少脑细胞啊。
以前我们只需要兼容IE6和FF,现在有了IE7,IE8,我们要兼容主流的浏览器,现在需要做到兼容IE6,IE7,IE8,FF,其他浏览器暂且认为是FF一派吧,暂称为标准浏览器,参考了一些网上的资料,总结如下:
"\9" {background-color:red\9;} 这里的\9可以区别所有的IE和FF
"*" IE6、IE7可以识别,IE8、FF不能
"_" IE6可以识别,IE7、IE8、FF不能
见下表
浏览器\hack | _ | * | \9 |
FF | NO | NO | NO |
IE8 | NO | NO | YES |
IE7 | NO | YES | YES |
IE6 | YES | YES | YES |
这样就可以完全区分开IE6、IE7、IE8、FF了。看下面使用的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>CSS hack</title>
<style type="text/css">
<!--
.color{
width:200px;
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
.text{
width:200px;
}
-->
</style>
</head>
<body>
<div class="color">测试方块</div>
<div class="text">
<strong style="color:#009933">IE6</strong>
<strong style="color:#0066FF">IE7</strong>
<strong style="color:#FF0000">IE8</strong>
<strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>