你對解決IE6兼容性問題常見方法是否了解,這裡和大家分享一下,希望對你的學習有所幫助,歡迎大家一起來學習。
解決IE6兼容性問題常見方法
1、使用聲明
你必須經常在Html網頁頭部放置一個聲明,推薦使用嚴格的標准。例如
- <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHtml4.01//EN”
- "http://www.w3.org/TR/Html4/strict.dtd”>
- or,forXHtml:
- <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHtml1.0Strict//EN”
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd”>
最後你需要是IE6進入兼容模式,這已經足夠兼容了。
2、使用position:relative
設置一個標簽position:relative可以解決很多問題,特別是曾經有過看不見的經歷或者奇怪布局的框架。明顯的,你需要小心,絕對位置放置的子元素是否都參照找到新位置。
3、為浮動元素使用display:inline
IE6兼容性解決方案為浮動元素使用display:inline。浮動元素會有一個著名的IE6雙邊距marginbug。假如你設置了左邊距5px但實際上得到了10px左邊距。display:inline可以解決這個問題,盡管它不是必需的,但是CSS仍然有效。
4、設置元素啟動hasLayout
大部分IE6(IE7)的渲染問題都可以通過起來元素的hasLayout屬性來兼容。這是IE內置的設定,確定一個內容塊相對其它內容塊是有界限和位置的。當你需要設置一個行內元素例如一個連接變成塊狀元素或者是透明效果,設置hasLayout也是必須的。
5、修復重復字符的bug
IE6兼容性解決方案修復重復字符的bug。復雜的布局會觸發一個bug:浮動對象的最後字符會出現在已經清除浮動的元素後面。這裡有幾種解決的辦法,部分是理想的,並且一些測試和出錯是必須的。
a、確保浮動元素都使用:display:inline;
b、最後一個浮動元素使用margin-right:-3px;
c、在浮動對象最後一個元素後使用一個條件注釋。例如<!—>這裡輸入注釋…<![endif]
d、在容器內的最後使用一個div空標簽(它也必須設置90%寬度甚至更小)
6、使用a標簽完成可點擊和hover原理
IE6只支持a標簽的CSS定義hover效果
你可以使用它去控制Javascript啟動的widgets,使得他們仍然保持鍵盤操作。這裡有個二擇一的問題,但是a標簽是所有解決方案中最可靠的。