web標準之 css其多瀏覽器相容

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

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

* ul和ol的預設padding值是不一樣的，在firefox中，padding-left預設值為40px左右，而ie中為0，一般設定ul就能解決大部分問題

* 對字型大小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實現相容性。

**如下：

#example

* html #example

*+html #example

這樣在ie6中顯示字型顏色是#666；在ie7中顯示的字型顏色是#999；在ff中顯示的顏色是#333

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

①對於背景不能自動延伸的原因上面說的很清楚，解決方法是多巢狀乙個層,這個層設定浮動，並承擔背景，就ok了。

下面就簡單示意一下

本行**就是讓背景顏色自動延續

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

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

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

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

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

.clear在ff中清除了行高，但是ie裡不認；

.clear在ff和ie中仍然不認；

像之前寫的.clear在ie中好使，但在ff中卻不能讓背景顏色延續，除非加上邊框。！挺有意思，還是不太懂

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

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