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

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

1. 文字大小不兼容

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

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

2.div高度不兼容

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

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

3.div寬度不兼容

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

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

4.div浮動(dòng)不兼容

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

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

5. double-margin不兼容

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

解決方案：給浮動(dòng)容器定義display:inline。

6. mirror margin不兼容

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

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

7.吞吃現(xiàn)象

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

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

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

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

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

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