個人整理的FF、IE的最基本的CSS相容技巧

1. float的div一定要閉合。例如：(其中floatA、floatB的屬性已經設定為float:left;)

   <wrapper> <div id="floatA"></div> <div id="floatB"></div> <div id="NOTfloatC"></div> </wrapper>

   這裡的NOTfloatC並不希望繼續平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標籤，必須將float標籤閉合。在 <div id="floatB"></div> <div id="NOTfloatC"></div> 之間加上<div class="clear"></div> aw提醒您：這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關係，否則會產生異常。並且將clear這種樣式定義為為如下即可：

   .clear { clear:both; }

   此外，為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私人屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。例如我的某一個wrapper如下定義：

   .colwrapper { overflow:hidden; zoom:1; margin:5px auto; }

   onhavinglayout-絕對不得錯過，每一個製作CSS以及用指令碼操作DOM的人都不得錯過！

2. margin加倍的問題。設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline; 例如： <div id="IamFloat"></div> 相應的css為

   #IamFloat { float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/ }

3. 關於容器的包涵關係很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
4. 關於高度的問題如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）
5. 最狠的手段 – !important; 如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於"!important"會自動優先解析,然而IE則會忽略.如下

   .tabd1 { background:url(/tab1.gif) no-repeat 0px 0px !important; /* for FF*/ background:url(/tab1.gif) no-repeat 1px 0px; /* for IE */ }

   值得注意的是，一定要將 xxxx !important 這句放置在另一句之上，具體原因很簡單，就不說了：）

補充：當時發表這篇文章時，並沒有IE7的出現，而且那個時候我也沒有很多地考慮JavaScript。這次更新一些。

一、IE6的border。會自動往外加margin。當第一個box和第二個box之間的margin為a時，如果兩個box都沒有border，那麼IE6、IE7、FF下面都沒問題。當有border時，FF和IE7的border不會佔用它們之間的“空位”，而IE6這個老喜歡“自作聰明”的傢伙就把margin給撐開了。我並沒有調試是否padding也會有這個副作用，我個人懷疑也有，但是既然把問題分析道這一步了，就不贅述了。解決方案就是判斷是否是IE6，然後動態修補margin。其間涉及到js擷取瀏覽器版本、樣式值這些技術。

二、對於塊元素，在IE6下面最好制定寬度才可float起來，尤其是a標籤。

三、在IE下，如果採用了list-style-position:inside，那麼可能會造成li元素強行往前縮排。