浮動屬性Float的跨瀏覽器案例解析：雙倍邊距、浮動元素寬度、3像素空隙問題 1. 雙倍邊距(Double Margin)問題1.1 解決方法：1.2 原理：1.3 雙倍邊距(Double Margin)問題整理1. 雙倍邊距(Double Margin)問題 一般使用margin：間距，會有比較多問題，因此能夠不用就盡量不用，而使用padding：內距， margin的兼容性沒有pading好，但有時候卻又不得不使用。 例如：在IE6中，若使用了float:left之後導致margin-left雙倍邊距 這裡是sidebar 這裡是mainpage 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] http://mepopedia.com/forum/read.php?844,18331,18331#msg-18331 Fri, 23 Oct 2026 10:56:32 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?844,18331,18331#msg-18331 浮動屬性Float的跨瀏覽器案例解析：雙倍邊距、浮動元素寬度、3像素空隙問題 http://mepopedia.com/forum/read.php?844,18331,18331#msg-18331
  1. 1. 雙倍邊距(Double Margin)問題
  2. 1.1 解決方法：
  3. 1.2 原理：
  4. 1.3 雙倍邊距(Double Margin)問題整理

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]]]> JinJin 跨瀏覽器相容性網頁設計 Sun, 04 Dec 2011 21:59:07 +0800