網頁設計如何解決兼容性問題

網頁設計如何解決兼容性問題？firefox下div容器定義height后，div不會因為內容超出height而撐大，而i6e下是會被內容撐大，高度限定失效。所以不要輕易給容器定義height。下面介紹網頁設計如何解決兼容性問題，希望對您有所幫助。

1. 文字大小不兼容

同樣14px的宋體字，ie下實際占高16px，下留白3px，firefox下實際占高17px，上留白1px，下留白3px。

文字大小不兼容解決方案： 給所有文字設定通用line-height值

2.div高度不兼容

firefox下div容器定義height后，div不會因為內容超出height而撐大，而i6e下是會被內容撐大，高度限定失效。所以不要輕易給容器定義height。

div高度不兼容解決方案：如果設置高度，需要同時把內容物高度限定，也就是溢出隱藏處理：overflow:hidden;或者當需要隨著內容自適應高度，但又想div有一個最小的高度時候，像這樣做min-height: 1400px;max-height:none;_height: 1400px;

3.div寬度不兼容

如果div容器設定float浮動但沒設定寬度，那么也會出現ie6和firefox的不兼容。firefox下內容會撐開容器滲入它前面的div，ie6下該div內容折行而不是我們想象的與同級div在同一行。

div寬度不兼容解決方案：浮動div容器一般需定義width。

4.div浮動不兼容

當前面div有左浮動和右浮動，下面div就會受他們影響也有浮動。ie也許不用加清除，但firefox下不清除浮動是不行的。

div浮動不兼容解決方案：給下面的div設定清除 clear:both;

5. double-margin不兼容

ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。

解決方案：給浮動容器定義display:inline。

6. mirror margin不兼容

當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px.padding也會出現類似問題，都是ie6下的特產，該類bug 出現的情況較為復雜，遠不只這一種出現條件，還沒系統整理。引申：ff 和ie 下對容器的margin-bottom，padding-bottom的解釋有時不一致，似乎與之相關。

解決方案：外層元素設定border 或設定float。

7.吞吃現象

還是ie6，上下兩個div，上面div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。

解決方案：使用zoom:1.這個zoom好象是專門為解決ie6 bug而生的。

8.注釋也能產生bug

多出來的一只豬，這是前人總結這個bug使用的比喻。ie6下這個bug，大家會在頁面看到豬字出現兩遍，重復內容量因注釋的多少而變。

解決方案：用" picRotate start "方法寫注釋。

      注：尊重原創文章,轉載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-61486.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注網頁制作頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050