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; 語法，如下：

#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;  如下：

#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 真是笨死了。

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！