2022-10-14 20:55:55|已瀏覽:149次
網頁設計如何解決兼容性問題
網頁設計如何解決兼容性問題?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://m.dedgn.cn/news-id-61486.html 違者必究!部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們,了解更多相關資訊請關注網頁制作頻道查看更多,了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多:150 3333 6050
姓名:
手機:
地區: