網(wǎng)頁設(shè)計如何解決兼容性問題

網(wǎng)頁設(shè)計如何解決兼容性問題

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

1. 文字大小不兼容

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

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

2.div高度不兼容

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

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

3.div寬度不兼容

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

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

4.div浮動不兼容

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

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

5. double-margin不兼容

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

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

6. mirror margin不兼容

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

解決方案：外層元素設(shè)定border 或設(shè)定float。

7.吞吃現(xiàn)象

還是ie6，上下兩個div，上面div設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對應(yīng)上面的背景吞吃現(xiàn)象，還有滾動下邊框缺失的現(xiàn)象。

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

8.注釋也能產(chǎn)生bug

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

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

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.elsolbar.com/news-id-61486.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注網(wǎng)頁制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050