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

Advanced

Change History

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

Changed By: HP
Change Date: December 10, 2011 11:59PM

浮動屬性Float的跨瀏覽器案例解析:雙倍邊距、浮動元素寬度、3像素空隙問題
<h2>雙倍邊距(Double Margin)問題</h2>

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

<xmp><div id="sidebar">這裡是sidebar</div>
<div id="mainpage">這裡是mainpage</div>
</xmp>

CSS的設定

<xmp>
#sidebar{
float: left;
border: 3px solid #09C;
width: 200px;
margin-left: 20px;
}

#mainpage{
border: 3px solid #F09;
width: 200px;
float: left;
margin-left: 20px;
}
</xmp>

在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示,但是如果到了IE6下就會出現雙倍邊距。

[hr]

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

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

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


<b>在IE6出現雙倍邊距的問題</b>

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


<h3>解決方法:</h3>
只要加入display: inline;即可

<xmp>
#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;
}
</xmp>

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

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

[hr]

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

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

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

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

[hr]
<h3>1. 雙倍邊距(Double Margin)問題</h3>
<b>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]</b>
<h3>雙倍邊距(Double Margin)問題整理</h3>
<b>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]</b>
Changed By: HP
Change Date: December 10, 2011 05:53PM

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

雙倍邊距(Double Margin)問題



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

<div id="sidebar">這裡是sidebar</div><br /> <div id="mainpage">這裡是mainpage</div><br />

CSS的設定

<br /> #sidebar{<br /> float: left;<br /> border: 3px solid #09C;<br /> width: 200px;<br /> margin-left: 20px;<br /> }<br /> <br /> #mainpage{<br /> border: 3px solid #F09;<br /> width: 200px;<br /> float: left;<br /> margin-left: 20px;<br /> }<br />

在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]


解決方法:


只要加入display: inline;即可

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

原理:


這是因為區塊默認的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]

1. 雙倍邊距(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]

雙倍邊距(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]
Changed By: HP
Change Date: December 10, 2011 05:50PM

浮動屬性Float的跨瀏覽器案例解析(IE6):雙倍邊距、浮動元素寬度、3像素空隙問題
<h2>1. 雙倍邊距(Double Margin)問題</h2>

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

<xmp><div id="sidebar">這裡是sidebar</div>
<div id="mainpage">這裡是mainpage</div>
</xmp>

CSS的設定

<xmp>
#sidebar{
float: left;
border: 3px solid #09C;
width: 200px;
margin-left: 20px;
}

#mainpage{
border: 3px solid #F09;
width: 200px;
float: left;
margin-left: 20px;
}
</xmp>

在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示,但是如果到了IE6下就會出現雙倍邊距。

[hr]

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

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

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


<b>在IE6出現雙倍邊距的問題</b>

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


<h3>解決方法:</h3>
只要加入display: inline;即可

<xmp>
#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;
}
</xmp>

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

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

[hr]

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

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

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

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

[hr]
<h3>1. 雙倍邊距(Double Margin)問題</h3>
<b>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]</b><h3>雙倍邊距(Double Margin)問題整理</h3>
<b>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]</b>
Changed By: JinJin
Change Date: December 04, 2011 09:59PM

浮動屬性Float的跨瀏覽器案例解析(IE6):雙倍邊距、浮動元素寬度、3像素空隙問題
<h2>1. 雙倍邊距(Double Margin)問題</h2>

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

<xmp><div id="sidebar">這裡是sidebar</div>
<div id="mainpage">這裡是mainpage</div>
</xmp>

CSS的設定

<xmp>
#sidebar{
float: left;
border: 3px solid #09C;
width: 200px;
margin-left: 20px;
}

#mainpage{
border: 3px solid #F09;
width: 200px;
float: left;
margin-left: 20px;
}
</xmp>

在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示,但是如果到了IE6下就會出現雙倍邊距。

[hr]

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

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

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


<b>在IE6出現雙倍邊距的問題</b>

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


<h3>解決方法:</h3>
只要加入display: inline;即可

<xmp>
#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;
}
</xmp>

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

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


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

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

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

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

<.photobucket.com/albums/ss1/whc915/dm004.jpg[/IMG]

[hr]
mepopedia.com/~jinjin/float/margin2-inline.html[/color]</b>

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

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

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

[hr]
<h3>1. 雙倍邊距(Double Margin)問題</h3>
<b>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]</b><h3>雙倍邊距(Double Margin)問題整理</h3>
<b>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]</b>

Original Message

作者: JinJin
Date: December 04, 2011 09:59PM

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

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



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

<div id="sidebar">這裡是sidebar</div><br /> <div id="mainpage">這裡是mainpage</div><br />

CSS的設定

<br /> #sidebar{<br /> float: left;<br /> border: 3px solid #09C;<br /> width: 200px;<br /> margin-left: 20px;<br /> }<br /> <br /> #mainpage{<br /> border: 3px solid #F09;<br /> width: 200px;<br /> float: left;<br /> margin-left: 20px;<br /> }<br />

在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]


解決方法:


只要加入display: inline;即可

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

原理:


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

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


[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]



在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]

1. 雙倍邊距(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]

雙倍邊距(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]