CSS 語法 – 同時使用 float 和 margin 時 – 在 IE6 會出問題

Microsoft 微軟於 2001 年發表 Internet Explorer 6.0 ，一般簡稱 IE6，這 10 幾年來一直折磨著網頁設計師，IE6是非常不聽話的瀏覽器，原因之一是IE6擁有太多非 W3C標準的功能，另一是現今新版本瀏覽器 Firefox、google chrome、Apple Safari … 功能完備，顯得IE6相對老舊不堪。

不幸的是 IE6 的市佔率這兩年依然居就不下，直到去年中旬 IE6 在台的市佔率還有 34% （請參考http://www.flycan.com.tw/board/modules/newbb/viewtopic.php?topic_id=2637&forum=27），目前 2011年 3月 IE6 在台的市佔率降至 10% 左右…

IE6 折磨網頁設計師的地方太多了，寫好的 CSS 排版，在各家瀏覽器都就可以正常顯示，偏偏在 IE6 就是會壞掉，最氣人的是剛好老闆也還在用 IE6 …>_< 以下是一例：

當一個區塊同時使用 float 和 margin 時，在 IE 6 所呈現出來的 margin 間距會變成 2 倍的大小！

但是，這個問題在 IE 7 和 Firefox、 google chrome、Apple Safari …都不會發生問題，所設定的 margin 間距會正常呈現。

---

CSS 語法部份~ 如下圖所示：

---

使用 Firefox 瀏覽器觀看，呈現結果如下：

---

使用 IE 7 瀏覽器觀看，呈現結果如下：

---

使用 IE 6 瀏覽器觀看，呈現結果如下：

---

有一個 CSS hack 方法可以解決 IE 6 的這個問題，就是在區塊最後加上 _display:inline; 語法，如下：

1 2 3 4 5 6 7 8

#BOX #INNERBOX { width:160px; height:160px; padding-top:20px; float:right; margin-right:100px; _display:inline; }

註：在 CSS 語法前面加一條底線時  IE 7 和 Firefox、 google chrome、Apple Safari …瀏覽器會忽略這一句，只有 IE 6 會套用~這就是神奇的 CSS hack 啊！

藉由這種 CSS hack 語法，也可以這麼用，改另一種 寫法來解決  _margin-right:50px;  如下：

1 2 3 4 5 6 7 8

#BOX #INNERBOX { width:160px; height:160px; padding-top:20px; float:right; margin-right:100px; _margin-right:50px; }

以上寫法，其他瀏覽器都會做 margin-right:100px; 這一句，只有 IE6 會做 _margin-right:50px; 這一句，然後 IE6 的問題會呈現出 2 倍，所以就剛剛好會是 margin-right:100px; …. IE6 真是笨死了。