HTML標準下出現的bug怎么解決

這篇文章主要講解了“HTML標準下出現的bug怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML標準下出現的bug怎么解決”吧！

1. 設置position: relative

將一個元素設置為”position:relative”可以解決很多問題，特別是你曾經遇到隱藏的或對齊詭異的盒子。

2.將浮動元素設置為display:inline

具有margin屬性的浮動元素可能引起的IE6雙倍margin問題，比如，你為一個元素指定margin-left為5px，但是IE6中實際上卻表現為10px。”display:inline”將解決這個問題，當然，方法也不是只有這一個。

3. 將一個元素設置為hasLayout

很多IE6(和IE7)的渲染問題可以通過設置元素的hasLayout來解決。 用來確定相對于其他元素，內容是如何布局和定位的。如果你需要設置一個inline元素(比如一個鏈接)為block元素，或者是應用透明效果。

最簡單的設置hasLayout的方法是為CSS設置一個高度或寬度（zoom也可以用，但是zoom并不是CSS標準的一部分）。我們推薦設置實 際尺寸，但是問題是這是不現實的，你可能需要使用”height:1%”。如果父元素并沒有設置高度，該元素的實際高度并不受影響，而且這個時候 hasLayout已經被啟用。

4. 修正重復文字bug

復雜的布局可以觸發在浮動元素的最后一些字符可能出現在出現在清除元素下面的bug。這里有幾個解決方法，有些是完美的，但是做一些反復試驗也是必須的：

◆確保所有的元素使用”display:inline;”

◆在最后一個元素上使用一個”margin-right:-3px;”

為浮動元素的最后一個條目使用一個條件注釋，比如：

<!&ndash;[if !IE]>Put your commentary in here&hellip;<![endif]&ndash;>

在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。)

5. 使用!important 或高級選擇器來區分IE6

不使用傳統Hack或在額外文件中的條件CSS的方法，寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義：

#element {

min-height: 20em;

height: auto !important; /* 所有瀏覽器都理解這段代碼 */

height: 20em; /* IE6 錯誤的使用這個值 /*

}

IE6 不理解min-height并錯誤的用20em覆蓋”auto”高度，但是，如果內容需要更多的空間的話，它會自動增加高度。另外一個可選的方法是使用高級選擇器，比如e.g。

#element {

min-height: 20em;

height: auto !important;

height: 20em;

overflow: visible;

}

6. 避免百分比單位

百分比會把IE搞糊涂的。除非你可以確切的控制每一個父元素的大小，才可能做到最佳預防。你可以通過!important在其他瀏覽器中繼續使用百分比，比如：

body {

margin: 2% 0 !important;

margin: 20px 0; /* IE6 only */

}

7. 盡早測試并不斷測試

不要等到你的網站或應用完成了才測試IE6;這樣的話問題可能更糟糕，而且會花更多時間來修正。如果你的網站能夠在Firefox和IE6中正常運行，那么一般在其它瀏覽器就不會有問題。

8. 重構你的代碼

經常發生的事情是，修正bug要比重新考慮一個布局問題要花更長的時間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味著你要放棄完美的代碼，但是會出現較少的長期問題而且將來你會很清楚如果處理這些可能出現的問題。

感謝各位的閱讀，以上就是“HTML標準下出現的bug怎么解決”的內容了，經過本文的學習后，相信大家對HTML標準下出現的bug怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！