CSS全面兼容主流浏览器的写法汇总
指定文件兼容性模式
要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
其内容随著指定的页面模式而更改，当要模拟IE7时，指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。
X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置。
下面的范例显示该模式设定为其他值的状况。
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode -->
<!-- This header mimics Internet Explorer 7 and uses
<!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。
你也可以使用内容属性来指定复数的文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。
如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7 mode。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
background:#ffc; /* 对firefox有效*/
*background:#ccc; /* 对ie7有效 */
_background:#000; /* 只对ie6有效 */
firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了，所以只认background:#ffc，看到的是黄色；
ie7前两段都能认，以最后的为准，所以最后解析是*background:#ccc，看到的是灰色；
ie6前三段都能认，而且“_”这个只有ie6能认，所以最后解析是_background:#000，看到的是黑色
ps：如果这样写还是有问题的话，请查看一下你的html头，看看<head>之前的内容是不是这样的标准写法
<!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">
CSS中 !important 这个属性的用法：在CSS的使用中，遇到最多的问题就是不同浏览器之间的兼容问题。 由于IE并不严格执行W3C标准， 而又几乎垄断了浏览器市场。 所以作为一名合格的网站制作人员， 必须要针对不同的浏览器进行微调。 实现不同浏览器之间兼容的方法有很多， 比如利用JS探测用户的浏览器类型，从而调用不同的样式表。 或者就是利用！important 属性来实现微调的效果。 下面是具体的例子。
下面是一段普通的 DIV 代码：
<div id="a"></div>
下面是有关层A在CSS样式表中的定义， 注意，这里使用了！important这个属性。
#a{margin-left:30px!important; margin-left:20px;}
在上面的例子中， 层a 在IE浏览器中， 左边距为20像素， 而在Firefox中， 左边距则变为30像素。 这是因为， !important在 CSS 中表示优先调用， 由于IE不能够识别这个属性， 所以在IE中， 只能够调用 “margin-left:20px;" 这个选项， 所以同样的一段代码， 在Firefox和IE中就会显示不同的样式。不过值得注意的是， 最新版的IE 7.0 已经可以识别 !important， 这个属性了， 但是IE 6.0仍然不能识别。 所以这个小技巧还是相当有用的.
.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
safari是可以解析 html* .e 这样的写法的，但是却不能解析* html .e 这种写法，所以。先写html* .e 定好了safari下面的样式，再写一段*html .e来定好ie下的样式就能达到兼容的效果了。
在CSS布局中，还常常用到IE Hack。if IE起着非常大的作用！
if IE什么意思呢？下面就列举了一些在CSS常见的HACK控制语句。
作为IE的IF条件注释使用备忘，大家可以参考，有经验欢迎与网友分享。
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
在css引入块中用if 判断浏览器加载不同的css：
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7hack.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6hack.css" />
<![endif]-->
欢迎跟贴补充！
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
