FireFox和IE中的CSS相容差異及解決方案

1.css在不同瀏覽器下顯示效果不同

firefox和IE對某些css樣式的認定有不少區別，包括：

• ul和ol的預設padding值是不一樣的，在Firefox中，padding-left預設值為40px左右，而IE中為0，一般設定ul{margin:0;padding:0;}就能解決大部分問題
• 對字型大小small的定義不同，Firefox中為13px，而IE中為16px，差別挺大，也只能設定為14px了事；(暫時沒有發現)
• 並列排列的多個元素（圖片或者連結）的代碼中的空格和斷行符號會造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px）
• 對不規範代碼的相容情況不同，IE中漏掉的關閉符號對顯示不造成影響，而firefox中就會形成錯亂的布局，而在ie中用到的padding和margin的負值都會被firefox解析為0，易造成布局的混亂；（我覺得好像負值在firefox中也是有顯示的）
• firefox對於長高尺寸的嚴格解析會造成與設定不匹配（超出）的圖片或表格將原設定div撐大；
• ！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來令一個CSS相容多種瀏覽器；
• 未定義id的div，在IE中會與div屬性中的其他設定有關，而在firefox中的位置會於div在檔案中位置有關，緊隨前一個div出現……（有待嘗試）
• 設定為float的div在ie下設定的margin會加倍的，特別是margin-left，這是ie6的一個bug。解決的方法是在這個div裡面加上display:inline;
• 如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）
• FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行。IE裡設定text-align:center，就置中了，但在FF中不行。所以一般兩個都要設定。
• FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width（也沒感覺，覺得設了padding，大家的高寬都變了）
• 在FF中可以實現的div 垂直置中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直置中了。缺點是要控制內容不要換行。這種方法在IE中實現不了。（已試過！有用）
• FF: 連結加邊框和背景色，需設定 display: block, 同時設定 float: left 保證不換行。
• 在浮動（float）的div後加clear屬性，這可以解決背景的自適應高度問題。怎麼加才能讓不同瀏覽器都好使？IE中有預設行高，這是要解決的問題。
• FF中不支援文字的自動轉行；什麼word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標準。（現在看到的解決辦法都是通過編程實現）

2.css解決不同瀏覽器的相容問題的方法 （不是我們需要的方法，我們要達到的要求是盡量不寫!important也能解決）

解決這種問題可以通過規範css代碼，使其符合兩種規範的標準樣式，也可以在差別處利用！important對firefox設定屬性，或者針對多種瀏覽器分別各自配置合適的CSS檔案，再通過判斷瀏覽器選擇不同CSS實現相容性。

代碼如下：

<!--[endif]-->

<!--[endif]-->

#example { color: #333; } /* FF*/
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

這樣在IE6中顯示字型顏色是#666；在IE7中顯示的字型顏色是#999；在FF中顯示的顏色是#333

3.FF解決背景的自適應高度問題

①對於背景不能自動延伸的原因上面說的很清楚，解決方案是多嵌套一個層,這個層設定浮動，並承擔背景，就ok了。
下面就簡單示意一下

可以這麼理解：float使得層自動獲得寬和高

但是有了第三種方法，這種方法好像並不值得推薦。

②另一種方法就是給第一個div賦予屬性值：display:table；但這種方法會造成另外一些布局上的錯誤。可以考慮使用，但不建議使用。

③我想這是最重要的一種方法，但是中間問題很多。方法就是clear:both。

.clear{clear:both}可以使高度向下延續，但是會自動產生行高；

.clear{clear:both;height:0}在FF中清除了行高，但是IE裡不認；

.clear{clear:both;height:1%}在FF和IE中仍然不認；

像之前寫的.clear{clear:both;height:1%;font-size:0px;overflow:hidden}在IE中好使，但在FF中卻不能讓背景顏色延續，除非加上邊框。！挺有意思，還是不太懂

.clear{clear:both;line-height:1px}好使！我理解是清的這個容器預設是行元素，所以高對它不起作用，所以你無論把height設定為幾都沒有效果，而line-height本身就是作用於行元素的，所以好使！

上面理解的不對!重新理解是：IE裡面有預設的行高，必須把行高給清掉，可以用font-size:0px或line-height:0px；但是這裡又有一個問題，就是height的值不要用百分數，沒有用！