IE6中的常見BUG與相應的解決辦法
IE6中的常見BUG與相應的解決辦法
1、IE6雙倍邊距bug
當頁面上的元素使用float浮動時，不管是向左還是向右浮動；只要該元素帶有margin畫素都會使該值乘以2，例如“margin-left:10px” 在IE6中，該值就會被解析為20px。想要解決這個BUG就需要在該元素中加入display:inline 或 display:block 明確其元素型別即可解決雙倍邊距的BUG。
2、IE6中3畫素問題及解決辦法
當元素使用float浮動後，元素與相鄰的元素之間會產生3px的間隙。詭異的是如果右側的容器沒設定高度時3px的間隙在相鄰容器的內部，當設定高度後又跑到容器的相反側了。要解決這類BUG的話，需要使佈局在同一行的元素都加上float浮動。
3、IE6中奇數寬高的BUG
IE6中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。要解決此類問題，只需要儘量將外部定位的div高寬寫成偶數即可。
4、IE6中圖片連結的下方有間隙
IE6中圖片的下方會存在一定的間隙，尤其在圖片垂直挨著圖片的時候，即可看到這樣的間隙。要解決此類問題，需要將img標籤定義為display:block 或定義vertical-align對應的屬性。也可以為img對應的樣式寫入font-size:0。
5、IE6下空元素的高度BUG
如果一個元素中沒有任何內容，當在樣式中為這個元素設定了0-19px之間的高度時。此元素的高度始終為19px。
解決的方法有四種:
(1) 在元素的css中加入：overflow:hidden
(2) 在元素中插入html註釋：<!– >
(3) 在元素中插入html的空白符：
(4) 在元素的css中加入：font-size:0
6、重複文字的BUG
在某些比較複雜的排版中，有時候浮動元素的最後一些字元會出現在clear清除元素的下面。
解決方法如下：
(1) 確保元素都帶有display:inline
(2) 在最後一個元素上使用“margin-right:-3px
(3) 為浮動元素的最後一個條目加上條件註釋，<!–[if !IE]>xxx<![endif]–>
(4) 在容器的最後元素使用一個空白的div，為這個div指定不超過容器的寬度。
7、IE6中 z-index失效
具體BUG為，元素的父級元素設定的z-index為1，那麼其子級元素再設定z-index時會失效，其層級會繼承父級元素的設定，造成某些層級調整上的BUG。詳細解釋可以閱讀IE6中部分情況下z-index無效的原因，以及解決辦法http://www.frontopen.com/199.html
(1) z-index無論設定多高都不起作用情況。
條件：1、父標籤 position屬性為relative；
2、問題標籤無position屬性（不包括static）；
3、問題標籤含有浮動(float)屬性。
解決：1、position:relative改為position:absolute；
2、去除浮動；
3、浮動元素新增position屬性（如relative，absolute等）
(2) 父標籤position屬性為relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。（IE7與IE6有著同樣的bug）
結語：實際上IE6中，很多BUG的解決方法都可以使用display:inline、font-size:0、float解決。因此我們在書寫程式碼時要記住，一旦使用了float浮動，就為元素增加一個display:inline樣式，可以有效的避免浮動造成的樣式錯亂問題。使用空DIV時，為了避免其高度影響佈局美觀，也可以為其加上font-size:0 這樣就很容易避免一些相容上的問題。
8、單行文字的高度問題
Windows 7
Firefox、Opera、Google瀏覽器等，“12px”的字以12px的高居中（上下各有4象素的距離）
而IE核心類瀏覽器（遨遊、360、TT、IE6、IE7、IE8）卻“統一”的呈現“35”狀況。以12px的字高，在20px的行高里居中偏上一個象素，即上3px、下5px的！
Windows XP
Firefox、Opera、Google瀏覽器等：字高11px，上4px，下5px
IE核心（遨遊、360、TT、IE6、IE7、IE8）：字高11px，上3px，下6px
以非IE核心的瀏覽結果為準
<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>
IE核心類的為準
<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>
總結：以非IE類的為準，優點是上下居中，這在單行圖文時最佳，雖然多了行樣式－－但值得。致命點是：”overflow: hidden;“，如果你在容器（DIV）裡有其他絕對定位的層時，別用！相反以IE類為準的，即沒有這個問題。遺憾的是：總是差那麼象素。如果想要完 美，只能用其他的手段（padding、margin）解決了！
認識hasLayout——IE瀏覽器css bug的一大罪惡根源
什麼是hasLayout？hasLayout是IE特有的一個屬性。很多的ie下的css bug都與其息息相關。在ie中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值為true時，它負責對自己和可能的子孫元素進行尺寸計算和定位。雖然這意味著這個元素需要花更多的代價來維護自身和裡面的內容，而不是依賴於祖先元素來完成這些工作。
下列元素預設 hasLayout=true
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>
很多情況下，我們把 hasLayout的狀態改成true 就可以解決很大部分ie下顯示的bug。
hasLayout屬性不能直接設定，你只能通過設定一些特定的css屬性來觸發並改變 hasLayout 狀態。下面列出可以觸發hasLayout的一些CSS屬性值。
————————————-
display
啟動haslayout的值:inline-block
取消hasLayout的值:其他值
————————————–
width/height
啟動hasLayout的值：除了auto以外的值
取消hasLayout的值：auto
—————————————
position
啟動hasLayout的值：absolute
取消hasLayout的值：static
—————————————-
float
啟動hasLayout的值：left或right
取消hasLayout的值：none
—————————————
zoom
啟動hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微軟IE專有屬性，可以觸發hasLayout但不會影響頁面的顯示效果。zoom: 1常用來除錯，不過 ie 5 對這個屬性不支援。）
—————————————-
writing-mode: tb-rl
這也是微軟專有的屬性。
ie7還有一些額外的屬性可以觸發該屬性（不完全列表）：
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)5
position: fixed
要注意的是，hasLayout是微軟專有的東西，對firefox等比較遵守標準的瀏覽器就無效了，因此不可太過依賴。貌似現在的IE8就已經不用特意去觸發hasLayout就可以得到和firefox一致的效果，不知ie8是否已經棄用這個屬性了？
其實依據合理的語義化，恰當的文件流，正確的標準化所生產出來的頁面，在各個公司出品的標準渲染的瀏覽器下，一般並不會存在太多相容性的問題的。
一般如果是因為layout而引起的顯示不符期望效果的話，在ff下會表現正常，而在ie下會出現錯誤。這個時候可以嘗試觸發父容器及其中的子容器的haslayout屬性，通常可以通過加上zoom: 1;來除錯。直到找到了產生問題的元素，再進行鍼對性的修正。最好的辦法是對這個元素設定尺寸屬性。但是，有時不便指定尺寸屬性的情況下，就只能尋找替代方案了。對於ie7 ，最好的辦法是設定最小高度屬性為0；這個技術是無害的，因為0本來就是這個屬性的初始值。而且沒有必要對其他瀏覽器隱藏這個屬性。而對於ie6和更早版本中觸發一個元素hasLayout的方法是在overflow屬性是visible的情況下設定這個元素的高度屬性為1%，然後對其他瀏覽器隱藏這個設定。這種技術就是著名的Holly hack
捐助開發者
在興趣的驅動下,寫一個免費的東西，有欣喜，也還有汗水，希望你喜歡我的作品，同時也能支援一下。 當然，有錢捧個錢場（右上角的愛心標誌，支援支付寶和PayPal捐助），沒錢捧個人場，謝謝各位。
謝謝您的贊助，我會做的更好！