html5兼容性問題(編輯修改稿)
2025-07-04 13:34 本頁面
【文章內容簡介】 。 /* 增加底邊線 */或者li { width:100%。} /* 滿寬顯示 */或者li { height:。} /* 以行高大小定義高度 */162 流動布局的兼容性處理 列表兼容性處理—列表行雙倍高度問題方法二，使用zoom屬性。zoom是IE的私有屬性，它能夠定義元素的縮放比列。但是它也能夠使列表項恢復到正常行高。例如，下面代碼可以輕松修正列表項的雙倍行高問題，且對于其他版本瀏覽器沒有副作用。172 流動布局的兼容性處理 列表兼容性處理—列表項錯行問題這個問題存在于FF瀏覽器中。當為列表項中嵌套塊狀元素，且項目符號在內部顯示時，FF瀏覽器中會出現錯行問題，而在IE等其他瀏覽器中卻不會出現這類問題。方法一，定義項目符號顯示在列表項的外面。如果顯示在列表項內部，FF會根據塊狀元素僅能夠在一行內顯示的原則，從而錯行顯示。此時即使定義塊元素寬度不為100%，它也會錯行顯示。li a{/* 列表項包含的塊元素 */display:block。 /* 塊狀顯示 */width:80%。 /* 寬度 */}182 流動布局的兼容性處理 列表兼容性處理—列表項錯行問題方法二，定義塊元素為行內塊狀顯示，可以清除塊狀占據一行的問題。li a{/* 列表項包含的塊元素 */display:inlineblock。 /* 行內塊狀顯示，清除滿行顯示 */}192 流動布局的兼容性處理 默認高度問題這個問題存在于IE 6及其以下版本瀏覽器中。當定義元素的高度小于元素默認行高時，高度將始終保持默認行高。解決方法：定義元素內字體大小為0，這樣就清除了行高對于高度的影響。但是不能夠定義行高為0，因為字體大小默認為16像素，所以還會影響高度設置，而當字體大小為0時，行高也就沒有了。bar {fontsize:0。}202 流動布局的兼容性處理 默認高度問題如果就這個問題繼續(xù)探索。當我們定義元素高度為1像素時，則你又會發(fā)現：在IE 6及其以下版本中顯示為2像素高度，而IE 7和非IE下顯示為1像素。使用CSS定義的overflow屬性來裁切多出的高度，代碼如下。bar {overflow:hidden。} /* 裁切多出區(qū)域 */212 流動布局的兼容性處理 盒模型高和寬的計算問題這個問題存在于IE 。IE 、補白區(qū)域大小和邊框區(qū)域大小，通俗說就是元素實際顯示的大小。而根據CSS標準，height和width屬性值不應該包含補白區(qū)域大小和邊框區(qū)域大小，它僅代表內容區(qū)域的大小。解決此問題方法有多種，但最安全、有效的方法就是使用IE條件語句。把IE條件語句放在原來樣式表的底部即可（代碼如下），這樣就在IE 6等其他版本瀏覽器相同的大小效果。222 流動布局的兼容性處理 最小高度和寬度問題這個問題存在于IE 6及其以下版本瀏覽器中，準確說這個問題不是Bug，而只是暫時功能不支持，或者說不完善，即IE 6及其以下版本瀏覽器不支持minheight和minwidth屬性的問題。所以，解決方法是：專門為IE 6及其以下版本瀏覽器定義一個高度，具體代碼如下：* html box {/* IE6及其以下版本瀏覽器過濾器 */height:100px。 /* 定義高度為100像素 */}232 流動布局的兼容性處理 超鏈接兼容處理—失控的子標簽問題這個問題存在于IE 6及其以下版本瀏覽器中。當在超鏈接中嵌套一個子標簽時，如
教學教案相關推薦
鄂ICP備17016276號-1