首先推荐一款集成多个版本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 ）
?
转自：http://blog.csdn.net/n_ithero/archive/2009/11/25/4873376.aspx