Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

浮動屬性Float的跨瀏覽器案例解析:雙倍邊距、浮動元素寬度、3像素空隙問題

1. 雙倍邊距(Double Margin)問題



一般使用margin:間距,會有比較多問題,因此能夠不用就盡量不用,而使用padding:內距, margin的兼容性沒有pading好,但有時候卻又不得不使用。
例如:在IE6中,若使用了float:left之後導致margin-left雙倍邊距

<div id="sidebar">這裡是sidebar</div> <div id="mainpage">這裡是mainpage</div>
CSS的設定

#sidebar{ float: left; border: 3px solid #09C; width: 200px; margin-left: 20px; } #mainpage{ border: 3px solid #F09; width: 200px; float: left; margin-left: 20px; }
在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示,但是如果到了IE6下就會出現雙倍邊距。

[hr]

[color=#993300]測試網址:http://mepopedia.com/~jinjin/float/margin2.html[/color]

在IE7以上版本,以及FireFox、GoogleChrome為正常顯示,觀察的效果如下:

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm002.jpg[/IMG]


在IE6出現雙倍邊距的問題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm003.jpg[/IMG]


1. 解決方法:


只要加入display: inline;即可

#sidebar{ float: left; border: 3px solid #09C; width: 200px; margin-left: 20px; display: inline; } #mainpage{ border: 3px solid #F09; width: 200px; float: left; margin-left: 20px; }

2. 原理:


這是因為區塊默認的display屬性值是block,當設置了浮動的同時,還設置了區塊外邊距就會出現這種情況。

另外第二個區塊和與旁邊區塊之間就不存在雙倍邊距的BUG。

[hr]

[color=#993300]解決雙倍邊距測試網址:http://mepopedia.com/~jinjin/float/margin2-inline.html[/color]

在IE6以及IE7以上版本、FireFox、GoogleChrome皆為正常顯示,觀察的效果如下:

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm005.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm004.jpg[/IMG]

[hr]

3. 雙倍邊距(Double Margin)問題整理


1.1 何種瀏覽器會有問題
[color=#CC0066]1.1.1        IE6[/color]

1.2 何種情況會有問題
[color=#CC0066]1.2.1 在IE6中,靠近網頁邊界的部分,若使用了float:left,也設定margin-left,(若使用了float:right,也設定margin-right)就會產生雙倍邊距[/color]

1.3 解決方式
[color=#CC0066]1.3.1 加入display: inline[/color]




Edited 4 time(s). Last edit at 12/10/2011 11:59PM by HP.
(編輯記錄)