css相容問題

1. 就是 ie6 雙倍邊距的問題，在使用了 float 的情況下，不管是向左還是向右都會出現雙倍，最簡單的解決方法就是用 display:inline;加到 css 裡面去。

2. 文字本身的大小不相容。同樣是 font-size:14px 的宋體文字，在不同瀏覽器下佔的空間是不一樣的，ie 下實際佔高 16px，下留白 3px，ff 下實際佔高 17px，上留白 1px，下留白 3px，opera 下就更不一樣了。解決方案:給文字設定 line-height 。確保所有文字都有預設的 line-height 值。這點很重要，在高度上我們不能容忍 1px 的差異。

3. ff 下容器高度限定，即容器定義了 height 之後，容器邊框的外形就確定了，不會被內容撐大，而 ie 下是會被內容撐大，高度限定失效。所以不要輕易給容器定義 height。

4. 還討論內容撐破容器問題，橫向上的。如果 float 容器未定義寬度，ff 下內容會盡可能撐開容器寬度，ie 下則會優先考慮內容折行。故，內容可能撐破的浮動容器需要定義 width。

5. 浮動的清除，ff 下不清除浮動是不行的。

6. mirrormargin bug，當外層元素內有 float 元素時，外層元素如定義 margin-top:14px，將自動生成 margin-bottom:14px。padding 也會出現類似問題，都是 ie6 下的特產，該類 bug 出現的情況較為複雜，遠不只這一種出現條件，還沒系統整理。解決方案:外層元素設定 border 或設定 float。

7. 吞吃現象，限於篇幅，我就不展開了。還是 ie6，上下兩個 div，上面的 div 設定背景，卻發現下面沒有設定背景的 div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案:使用 zoom:1。這個 zoom 好象是專門為解決 ie6 bug 而生的。

8. 注釋也能產生 bug~~~「多出來的乙隻豬。」這是前人總結這個 bug 使用的文案，ie6 的這個 bug 下，大家會在頁面看到豬字出現兩遍，重複的內容量因注釋的多少而變。解決方案:用「」方法寫注釋。

9. 裡加 float ，這是乙個典型的，棘手的相容問題，希望引起大家正視，給 li 不同的屬性會有不同的解釋效果，ff 下的解釋稍可理解，ie6 下的解釋會讓你摸不著頭腦，由於問題的複雜性，將另起一文專門討論該問題。在《ul 使用心得》一文裡有相關成果，卻沒給出問題解決的過程。

10. img 下的留白。解決方案:給img設定 display:block。

11. 失去 line-height。

，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是

13. 非鏈結的 hover 狀態。div:hover{} 這樣的樣式 ie6 是不認的，在 ie7、ff 下才有效果。

14. ie 下 overflow:hidden 對其下的絕對層 position:absolute 或者相對層 position:relative 無效。解決方案:給 overflow:hidden 加 position:relative 或者 position:absolute。另，ie6 支援 overflow-x 或者 overflow-y 的特性，ie7、ff 不支援。

15. ie6 下嚴重的 bug，float 元素如沒定義寬度，內部如有 div 定義了 height 或 zoom:1，這個 div 就會佔滿一整行，即使你給了寬度。float 元素如果作為布局用或複雜的容器，都要給個寬度的。

16. ie6 下的 bug，絕對定位的 div 下包含相對定位的 div，如果給內層相對定位的 div 高度 height 具體值，內層相對層將具有 100%的 width 值，外層絕對層將被撐大。解決方案給內層相對層 float 屬性。

17. ie6 下的 bug，內有的情況下，position:relative 層下的 float 層內文字無法選中。

18. 終於來了個ff的缺點。width:100%這個東西在ie裡用很方便，會向上逐層搜尋width 值，忽視浮動層的影響，ff 下搜尋至浮動層結束，如此，只能給中間的所有浮動層加 width:100%才行，累啊。opera 這點倒學乖了跟了 ie。

css相容問題

css相容問題

css相容問題

CSS 相容問題

相關推薦