浏览器CSS兼容总结
首先推荐一款集成多个版本IE(IE5.5、IE6、IE7、IE8)的样式测试工具（IETester）：
http://www.my-debugbar.com/wiki/IETester/HomePage
以下是上个月总结的样式兼容方面的技巧，现发布到博客。
1. 使用DIV+CSS布局注意事项：
使用DIV+CSS布局，要配合一定的table布局才能较好的达到多浏览器兼容。
完全使用DIV+CSS布局实现多浏览器的兼容，难度较大；
在对样式不熟悉且项目需求中没有要求一定要用DIV+CSS布局的情况下，建议直接使用table布局，这样更容易实现多浏览器兼容；
2. IE不同版本之间的兼容，IE与火狐的兼容：
可以使用如下形式(以IE6为例)，为特定版本的IE使用特定的样式达到IE不同版本间的样式兼容
<!--[if lte IE 6]>
<link href="../../Content/DropdownMenuIE6.css" rel="Stylesheet" type="text/css" />
<![endif]-->
这里的<!--[if lte IE 6]>和<![endif]-->之间除了可以使用link标签引用样式外，还可以用style标签声明特定的样式。
像_width，_height等在样式属性名前加“_”只有IE6才能识别。
在样式属性值之后接“!important”（必须写在未加!important的同名属性前），IE6会忽略，IE7、IE8及FF能识别。
在样式属性前加“*”则只有IE能够识别。
例如：
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
|
|
IE6 |
IE7 |
FF |
| * |
√ |
√ |
× |
| !important |
× |
√ |
√ |
#someNode
{
position: fixed; /* FF及其他浏览器*/
#position: fixed; /* IE7 */
_position: fixed; /*IE6以及更老的版本*/
}
#example { color: #333; } /* FF及其他浏览器*/
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
注意：
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
以下为引用的内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
可以使用以下HTML：
<meta http-equiv="x-ua-compatible" content="ie=7" />
让IE8使用兼容IE7的样式模式。
当由于使用margin 、padding导致的IE与FF显示的宽度有差异时，除了可以尝试使用上文提及的方法处理外，还可以使用脚本在相应的部分添加样式，例如：
<script language="javascript" src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
//火狐浏览器样式
$(document).ready(function(){
var bro=$.browser;
if(bro.mozilla) {
$("#aboutMenu").attr("style","padding:0 33px 0 23px;");
$("#headTaleFF").attr("style","width:951px;");
}
})
</script>
上面的代码是使用jquery判断当前的浏览器是否是火狐，当是火狐浏览器时，添加相应的样式（覆盖之前产生差异的样式），使得火狐中的显示宽度与IE保持一致。
3. 补充一些项目中的样式问题：
用hr标签显示一条横线时，在FF中的颜色始终是深黑色（即使写了颜色样式）。
这时可以考虑用DIV实现显示横线，但如果样式中不加overflow: hidden;则在IE6中横线的高度会有20像素左右，而不是1像素。正确的写法如下：
<div style="background-color: #b2b5b6; width: 179px; height: 1px; overflow: hidden;" />
在使用li标签时（例如在导航条中），因为li标签的内容前会有列表符号，所以会空出一部分，如果要消除这部分空余，在li标签的样式里添加 padding: 0px;margin-left: 0px;list-style-type: none;既可。
4.针对webkit的hacks：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
}
这样的hacks同样是被Google Chrome、Safari 3.0、Opera 9 所识别的。“另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。”
将chrome的字体设置为宋体，其它浏览器仍然使用默认设置的字体：
@media screen and (-webkit-min-device-pixel-ratio:0) {
.parent-cat li{font-family:'宋体'}
.parent-cat li{font-family:inhert;#}
}
在设置完针对google chrome的样式后，再通过css inhert + # hacks即可达目标。
（针对webkit的hacks来源：http://www.ajaxbbs.net/post/google-chrome-only-css-hacks.html）