1. 雙倍邊距(Double Margin)問題
一般使用margin:間距,會有比較多問題,因此能夠不用就盡量不用,而使用padding:內距, margin的兼容性沒有pading好,但有時候卻又不得不使用。
例如:在IE6中,若使用了float:left之後導致margin-left雙倍邊距
這裡是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]
Edited 4 time(s). Last edit at 12/10/2011 11:59PM by HP.
(
編輯記錄)