怎么解決IE6兼容性問題的十大技巧

本篇文章為大家展示了怎么解決IE6兼容性問題的十大技巧，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

10要點解決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

IE6兼容性問題解決方案二：使用position:relative。設置一個標簽position:relative可以解決很多問題，特別是曾經有過看不見的經歷或者奇怪布局的框架。明顯的，你需要小心，絕對位置放置的子元素是否都參照找到新位置。

3、為浮動元素使用display:inline

浮動元素會有一個著名的IE6雙邊距marginbug。假如你設置了左邊距5px但實際上得到了10px左邊距。display:inline可以解決這個問題，盡管它不是必需的，但是css仍然有效。

4、設置元素啟動hasLayout

大部分IE6（IE7）的渲染問題都可以通過起來元素的hasLayout屬性來兼容。這是IE內置的設定，確定一個內容塊相對其它內容塊是有界限和位置的。當你需要設置一個行內元素例如一個連接變成塊狀元素或者是透明效果，設置hasLayout也是必須的。

5、修復重復字符的bug

復雜的布局會觸發一個bug：浮動對象的***字符會出現在已經清除浮動的元素后面。這里有幾種解決的辦法，部分是理想的，并且一些測試和出錯是必須的。
a、確保浮動元素都使用：display:inline；
b、***一個浮動元素使用margin-right:-3px;
c、在浮動對象***一個元素后使用一個條件注釋。例如<!&mdash;>這里輸入注釋&hellip;<![endif]
d、在容器內的***使用一個div空標簽（它也必須設置90%寬度甚至更小）

6、使用a標簽完成可點擊和hover原理

IE6只支持a標簽的css定義hover效果
你可以使用它去控制javascript啟動的widgets，使得他們仍然保持鍵盤操作。這里有個二擇一的問題，但是a標簽是所有解決方案中最可靠的。

7、使用!important，或是高級選擇符替代IE特定代碼

IE6兼容性問題解決方案七;：使用!important。在外置的css文件里，放棄憑借傳統的hacks和條件判斷，使用有效的css代碼去針對IE6仍然是有可能的。例如：最小高度可以使用一下定義。

#element{  min-height:20em;  height:auto!important;/*understoodbyallbrowsers*/  height:20em;/*IE6incorrectlyusesthisvalue/*  }

IE6不支持“min-height”并且錯誤的將20em重寫為“auto”。不過，當內容大于設置的空間時，它會增加它的尺寸。
另外一個選擇是使用高級選擇符。例如

#element{  min-height:20em;  height:20em;  }

8、避免百分比定義

百分比在IE下比較混亂。除非你非常小心每個父元素的尺寸，這樣就大概可以***避免了。你仍然可以對其他瀏覽器使用!important來使用百分值。例如：

body{  margin:2%0!important;  margin:20px0;/*IE6only*/  }

9、早點和經常測試

在你的網站和應用程序完成之前，不要放棄IE6的測試。問題將會更加嚴重并且需要很長時間去修復。如果你的網站可以運行于firefox和IE6，它將差不多肯定可以在其它瀏覽器下運行。

10、重構你的代碼

IE6兼容性問題解決方案十：重構代碼。經常的，修復會比重新考慮布局問題更加花費時間。Html細微的修改和更加簡單的css經常是最有效的。這意味著你要放棄***的合法的代碼，但是將會更少的問題出現，并且你知道怎樣處理將要出現的情況。

/*ignoredbyIE6*/  #element[id]{  height:auto;  }

代碼部分試了下語法著色，貌似有點亂了，這里是英文原文的鏈接:http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-IE6-problems/

上述內容就是怎么解決IE6兼容性問題的十大技巧，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。