兼容ie6常見問題-10條有效的html和css代碼

2020-03-24 16:02:50

字體：大中小

供稿：網(wǎng)友

ie6目前依然是國內(nèi)用戶的主要瀏覽器，因此作為網(wǎng)頁前端開發(fā)來說，無可避免必須兼容IE6瀏覽器，這里有十條使用有效的html和css代碼修復(fù)可以兼容ie6常見的問題。我們知道ie會在一段時間內(nèi)仍然流行，但是我們?nèi)匀豢梢灾С譃g覽器并且避免hacks和條件css嗎？這里有十條使用有效的html和css代碼修復(fù)可以兼容ie6常見的問題。1、使用一個聲明
你必須經(jīng)常在html網(wǎng)頁頭部放置一個聲明，推薦使用嚴(yán)格的標(biāo)準(zhǔn)。例如或者xhtml使用最后你需要是ie6進入兼容模式，這已經(jīng)足夠兼容的了。2、使用position: relative
設(shè)置一個標(biāo)簽position: relative可以解決很多問題，特別是曾經(jīng)有過看不見的經(jīng)歷或者奇怪布局的框架。明顯的，你需要小心，絕對位置放置的子元素是否都參照找到新位置。3、為浮動元素使用display:inline
浮動元素會有一個著名的ie6雙邊距margin bug。假如你設(shè)置了左邊距5px但實際上得到了10px左邊距。display:inline可以解決這個問題，盡管它不是必需的，但是css仍然有效。4、設(shè)置元素啟動hasLayout
大部分ie6（ie7）的渲染問題都可以通過起來元素的hasLayout屬性來兼容。這是ie內(nèi)置的設(shè)定，確定一個內(nèi)容塊相對其它內(nèi)容塊是有界限和位置的。當(dāng)你需要設(shè)置一個行內(nèi)元素例如一個連接變成塊狀元素或者是透明效果，設(shè)置hasLayout也是必須的。5、修復(fù)重復(fù)字符的bug
復(fù)雜的布局會觸發(fā)一個bug：浮動對象的最后字符會出現(xiàn)在已經(jīng)清除浮動的元素后面。這里有幾種解決的辦法，部分是理想的，并且一些測試和出錯是必須的。
a、確保浮動元素都使用：display:inline；
b、最后一個浮動元素使用margin-right:-3px;
c、在浮動對象最后一個元素后使用一個條件注釋。例如這里輸入注釋 ![endif]
d、在容器內(nèi)的最后使用一個div空標(biāo)簽（它也必須設(shè)置90%寬度甚至更小）6、使用a標(biāo)簽完成可點擊和hover原理
Ie6只支持a標(biāo)簽的css定義hover效果
你可以使用它去控制javascript啟動的widgets，使得他們?nèi)匀槐３宙I盤操作。這里有個二擇一的問題，但是a標(biāo)簽是所有解決方案中最可靠的。7、使用!important，或是高級選擇符替代ie特定代碼
在外置的css文件里，放棄憑借傳統(tǒng)的hacks和條件判斷，使用有效的css代碼去針對ie6仍然是有可能的。例如：最小高度可以使用一下定義。
#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}
Ie6不支持 min-height 并且錯誤的將20em重寫為 auto 。不過，當(dāng)內(nèi)容大于設(shè)置的空間時，它會增加它的尺寸。
另外一個選擇是使用高級選擇符。例如
#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}8、避免百分比定義
百分比在ie下比較混亂。除非你非常小心每個父元素的尺寸，這樣就大概可以最后避免了。你仍然可以對其他瀏覽器使用!important來使用百分值。例如：
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}9、早點和經(jīng)常測試
在你的網(wǎng)站和應(yīng)用程序完成之前，不要放棄ie6的測試。問題將會更加嚴(yán)重并且需要很長時間去修復(fù)。如果你的網(wǎng)站可以運行于firefox和ie6，它將差不多肯定可以在其它瀏覽器下運行。10、重構(gòu)你的代碼
經(jīng)常的，修復(fù)會比重新考慮布局問題更加花費時間。Html細(xì)微的修改和更加簡單的css經(jīng)常是最有效的。這意味著你要放棄完美的合法的代碼，但是將會更少的問題出現(xiàn)，并且你知道怎樣處理將要出現(xiàn)的情況。更多編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：加深對HTML和CSS標(biāo)簽語義化的理解

下一篇：分享HTML和CSS實現(xiàn)的炫酷登錄頁面代碼