首先推薦一款內建多個版本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" target="_blank" rel="external nofollow" 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;
#position: fixed;
_position: fixed;
}
#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }
注意：
*+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) {
}
這樣的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）
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)