IE6~IE7 bugs，ie6ie7bugs

IE6~IE7 bugs，ie6ie7bugs

        本來想寫一篇關於 IE bugs 的總結的，但是發現 IE 的 bugs 一般都存在IE5，IE6，IE7上，這都是很古老的瀏覽器。而且這些 bugs 測試起來相當麻煩，IEtester和 IE10 內建的文檔模式選擇都有一些偏差，要在虛擬機器上安裝系統測試才是最為準確的，最最重要的原因是現在的網頁開發 IE5 基本是不考慮了，IE6，IE7 也快完全退出曆史舞台了，一般網站會通過檢測瀏覽器版本並提示使用者升級瀏覽器，所以這些 bugs 在現在的開發中遇到的幾率是很低的。

        而之所以要總結是因為偶爾在學習過程中，一些部落格或書中會涉及到這些 bugs，甚至在一些公司的筆試中喜歡挑出這些來考考你對 CSS 的瞭解是否夠深入。所以我還是本著前人栽樹後人乘涼的原則去網上找一些好的資源學習好了。尋尋覓覓終於在W3C Plus上找到站長大漠的瀏覽器安全色之旅，總共四篇，總結得比較系統，可讀性比較強，就以此為主要的資源學習吧。連結如下： 瀏覽器安全色之旅的第一站:如何建立條件樣式瀏覽器安全色之旅的第二站:各瀏覽器的Hack寫法（更全面的可以參考 葵中劍 的 CSS Hack Table）瀏覽器安全色之旅的第三站:IE常見Bug——part1 目錄結構：十種經典的Bug產生的原因一、浮動元素的雙倍Margin的Bug二、克服Box Model的Bug三、設定元素的最小高度和最小寬度四、塊元素水平置中五、列表li的樓梯Bug六、li空白間距七、IE6下無法設定元素的微高八、overflow:auto與position:relative的碰撞九、浮動層錯位十、IE6下躲貓貓 瀏覽器安全色之旅的第四站:IE常見Bug——part2 目錄結構：IE的Bug處理一、IE6複製文本的Bug二、ＩＥ片縮放Bu三、IE6下PNG圖片透明Bug四、<IFrame>透明背景Bug五、禁用IE瀏覽器預設的垂直捲軸六、IE6下:hover偽類Bug七、修複min-width/max-width和max-heigt/min-height的Bug八、修複position:relative的Bug九、修複margin的負值十、修複overflow的問題 不過，文章中有的地方不是很準確，有些細節描述也不夠清晰，所以下面做一些訂正和補充：1）第一站IE10和IE11已經不支援條件注釋了，具體可以參考IE的官方說明：不再支援條件注釋，除了條件注釋，IE很多傳統支援的功能的更改：傳統功能支援更改2）第三站 IE6及更低版本不認識 min-height，但是 height 屬性在IE6及以下版本是解析成 min-height 的效果，故設定元素的最小高度時可以為IE6-專門hack，即寫成：

1 min-height：100px；2 _height：100px；/*相容IE6-*/

 3）bugs 的補充 1、 IE6，IE7：ul 元素有了 Layout 屬性後，項目符號就會不見。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <ul>2     <li>無序列表</li>3     <li>無序列表</li>4     <li>無序列表</li>5 </ul>

CSS：

1 ul{2     zoom:1;3 }

IE6，IE7 表現如下：正常表現應該如下： 解決方案：為ul添加 padding-left:1em; 

1 ul{2     zoom:1;3     padding-left: 1em;4 }

則表現正常。 -------------------------------------------------------吃完栗子------------------------------------------------------- 2、 IE6，IE7：有序列表中，任何具有 Layout 特性的清單項目元素都會擁有獨立的計數器。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <ol>2     <li>有序列表</li>3     <li>有序列表</li>4     <li style="zoom:1;">有序列表</li>5     <li>有序列表</li>6     <li>有序列表</li>7 </ol>

IE6，IE7 表現如下： 解決方案：自己定義序號，不使用有序列表 ol 標籤。 -------------------------------------------------------吃完栗子-------------------------------------------------------  3、IE6，IE7：如果一個清單項目擁有 Layout 屬性，當該 Layout 清單項目元素跨行顯示時，項目符號會顯示為底部對齊，而不是按照一般的思維習慣頂部對齊。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <ol>2     <li>有序列表</li>3     <li>有序列表</li>4     <li style="zoom:1;">有序列表<br>有序列表<br>有序列表</li>5     <li>有序列表</li>6     <li>有序列表</li>7 </ol>

IE6，IE7 表現如下： 這裡也同時出現了重新計數的bug。 解決方案：同上，自己定義序號，不使用有序列表 ol 標籤。 ----------------------- --------------------------------吃完栗子-------------------------------------------------------  4、再之，在 IE6中，當清單項目元素 li 中包含有塊狀顯示的超連結元素時，列表元素之間的空格將不會被忽略，而會額外增加一行。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <ol>2     <li><a href="#">有序列表中的連結</a></li>3     <li><a href="#">有序列表中的連結</a></li>4     <li><a style="display:block;" href="#">有序列表中的連結</a></li>5     <li><a href="#">有序列表中的連結</a></li>6 </ol>

IE6 中的表現如下：IE7 表現正常： 解決方案：只需要為定義了 display:block 的 a 標籤元素觸發 hasLayout 屬性： 

1 <ol>2     <li><a href="#">有序列表中的連結</a></li>3     <li><a href="#">有序列表中的連結</a></li>4     <li><a style="display:block;zoom:1;" href="#">有序列表中的連結</a></li>5     <li><a href="#">有序列表中的連結</a></li>6 </ol>

-------------------------------------------------------吃完栗子-------------------------------------------------------  5、 IE6：當設定了 position:relative 的包含塊觸發了 hasLayout 屬性後，IE 瀏覽器才能夠正常地進行定位。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <span class="wrap">2     wrap3     <div class="box">4     </div>5 </span>

CSS：

 1 .wrap { 2     margin: 100px; 3     position: relative; 4     border: 1px solid #aaa; 5 } 6 .box { 7     position: absolute; 8     left: 100px; 9     top: 100px;10     width: 100px;11     height: 100px;12     background: #ccc;13 }

IE6 表現如下： 正常表現如下：  解決方案，說實話遇到這種情況的機會實在不多，因為需要一個行內元素包圍一個區塊層級元素，從結構上就是不合理的，但是為了說明清楚 IE6 的bugs，這裡還是說一下解決的方法，就是觸發父元素的 hasLayout 屬性，即添加 _zoom:1，相容 IE6：

1 .wrap {2     margin: 100px;3     position: relative;4     border: 1px solid #aaa;5     _zoom:1;6 }

但其實這種 hack 並不推薦，IE6 的表現並不和標準瀏覽器一致，行內元素表現出了區塊層級元素的特點，上下的 margin 值變得有效了：  -------------------------------------------------------吃完栗子-------------------------------------------------------
 6、 IE6 :hover 的bug直接上例子 -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <a href="#">功能表項目<img src="i.png"></a>

CSS：

 1 a{ 2     text-decoration: none; 3 } 4 a img{ 5     display: none; 6     border:none; 7 } 8 a:hover img{ 9     display: inline;10 }

標準瀏覽器下，當滑鼠在連結上時，圖片會顯現，但是IE6沒有效果：原因是 a:hover 不具有 hasLayout 特性，故解決的方法也很容易，即啟用 a:hover 的 hasLayout 屬性：

1 a:hover{2     _zoom:1;3 }

-------------------------------------------------------吃完栗子-------------------------------------------------------
 6、 IE6 躲貓貓bug大漠的博文中沒有對這個 bug 的具體例子，這裡舉個具體例子協助理解。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <div class="wrap">2     <div class="float">浮動超連結</div>3     <div><a href="#">超連結</a></div>4     <div><a href="#">超連結</a></div>5     <div><a href="#">超連結</a></div>6     <div><a href="#">超連結</a></div>7     <div class="clearfix"></div>8 </div>

CSS（其中跟/**/的表示觸發這個 bugs 的必要屬性）：

 1 .wrap { 2     background: #aaa;/**/ 3     border: 1px solid #666;/**/ 4 } 5 .wrap a:hover { 6     background: blue;/**/ 7 } 8 .float { 9     float: left;/**/10     border: 1px solid green;11     width: 120px;12     height: 150px;/**/13 }14 .clearfix {15     clear: both;/**/16 }

IE6表現如下：
但我在 IE7 中卻發現右邊沒浮動的超連結不見了，滑鼠放上去會變成 pointer 樣式，但是很痛點擊，這裡記錄一下，估計也是 bugs： 解決方案：以上必須的屬性只要有一個不存在就不會觸發這個 bugs，也可以通過觸發 .wrap 或 .floatfix 的 hasLayout 屬性來規避，即添加屬性 _zoom:1; -------------------------------------------------------吃完栗子------------------------------------------------------- 7、 IE6 多餘字元 bug在浮動元素之間增加 HTML 注釋時就會出現這個問題，上例子。  -------------------------------------------------------舉個栗子-------------------------------------------------------HTML：

1 <div class="wrap">2     <div>我是第一個div</div>3     <!-- 注釋 -->4     <div>下面會出現多餘的字元</div>5 </div>

CSS：

1 .wrap div{2     float: left;3     width: 100%;4 }

IE6表現如下： 解決方案：去掉注釋，或者不設定 width:100%； -------------------------------------------------------吃完栗子-------------------------------------------------------  以上的例子有些是網上搜集，有些書中的例子，以後可能會再補充，也歡迎大家補充。在這裡也感謝大漠站長的總結和分享。  水平有限，錯誤歡迎指正。原創博文，轉載請註明出處。