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

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

CSS 語法 - 網頁設計  - CSS 語法 - 同時使用 float 和 margin 時 - 在 IE6 會出問題 - 1_49e606ab048b3

不幸的是 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 語法部份~ 如下圖所示:

CSS 語法 - 網頁設計  - CSS 語法 - 同時使用 float 和 margin 時 - 在 IE6 會出問題 - 1_49e606882fdac


使用 Firefox 瀏覽器觀看,呈現結果如下:

CSS 語法 - 網頁設計  - CSS 語法 - 同時使用 float 和 margin 時 - 在 IE6 會出問題 - 1_49e60691a0257


使用 IE 7 瀏覽器觀看,呈現結果如下:

CSS 語法 - 網頁設計  - CSS 語法 - 同時使用 float 和 margin 時 - 在 IE6 會出問題 - 1_49e608ff5045d


使用 IE 6 瀏覽器觀看,呈現結果如下:

CSS 語法 - 網頁設計  - CSS 語法 - 同時使用 float 和 margin 時 - 在 IE6 會出問題 - 1_49e606ab048b3


有一個 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 真是笨死了。

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , .

迴響已被關閉。