伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。
這篇由伯樂線上前端開發小組的@rubyisapm 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
受影響版本
該BUG影響：IE7、IE6
Bug現象
被浮動元素的最後一個元素被複制現象
教程日期
2009.8.18 11:31:50 星期二
描述
這是我在 Gérard Talbot 的 IE7 Bug 頁面上發現的一個bug。說實在的，我忍不住對這這個bug傻笑。在 IE6 和 IE7 中，會複製最後一個字元。讓我們來看看演示：
演示
該演示在一個單獨頁面上
HTML程式碼：
|
1 2 3 4 5 6 7 |
<div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> |
CSS程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div { width: 100px; } p { margin-right: 1px; } span { float: left; width: 120px; } |
設定如下：演示中有一個div元素，有明確的width設定，在這個div中，有一個元素P——此元素有margin-right屬性且該值不為0（在IE6中margin不是必需的），且在該P元素內部有三個浮動的子元素，且這三個子元素的width值比外層元素div的width大。我們來看一下在受影響的瀏覽器中出現了什麼情況：最後一個字元“C”——被複制並重新顯示在下一行。我已經強調過這裡是有三個浮動元素，目前情況就是：如果有少於三個的浮動元素，此bug不會發生，而如果浮動元素數目多於三個，連續浮動元素bug就出現了。
解決方案
下面是針對此bug的解決方案
解決日期
2009 8.18 11:32:52 星期二
修復版本
所有受影響的IE
描述
注意：此方案也適用於針對浮動元素bug的CS解決方案
我們要用IE的bug修復利器去修正該bug。不！我不是在說“layout”,雖然可以通過設定P元素的layout以便IE7下修正該bug(IE6不適用)。來看看現在的頁面：
修正後的頁面：在單獨的頁面開啟
HTML程式碼：
|
1 2 3 4 5 6 7 |
<div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> |
CSS程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div { width: 100px; } p { margin-right: 1px; } span { float: left; width: 120px; position: relative; } |
唯一的區別是：我們在浮動元素span上加了position:relative這個屬性，字元C就不會再IE6和IE7中出現”複製”的現象了。