IE6盒子模型沒問題詳測雙倍邊距

2010-8-18

去騰訊面試，問IE6 。

前兩天看的《IE6 很邪惡，但我愛它的盒子模型》，我說盒子模型如何如何，面試官告訴我IE5的盒子模型有問題，不是IE6 。

回來查查書，《Web標準實戰》上說了，是IE5/Win的盒子模型有問題。看來CSS還是不夠精通。

特實驗如下：

實驗1：驗證width、padding、border

渲染模式：標準模式

結論：標準模式時，IE6瀏覽器采用W3C盒子模型，此時IE6、Firefox表現一致。

代碼：

復制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans"
head
meta http-equiv="Content-Type" content="text/html;charset=utf-8" /
titlebox/title
style type="text/css"
.clear
{
clear:both;
}
pre
{
margin:0;
white-space:pre-wrap;
word-wrap:break-word;
}
#container
{
width:700px;
margin:0 auto;
}
#content_1
{
background:#FFCC00;
border:20px solid #D65C00;
float:left;
height:300px;
width:200px;
padding:30px;
}
#content_2
{
background:#CEEDFC;
border:20px solid #336699;
float:right;
height:300px;
padding:30px;
width:300px;
}
/style
/head
body
div id="container"
p已聲名DOCTYPE html，即渲染模式：標準模式。
/p
p標準模式時， IE6瀏覽器采用W3C盒子模型，此時IE6、Firefox表現一致。
/p
pre
#container
{
width:700px;
margin:0 auto;
}
/pre
div id="content_1"
pre
#content_1
{
background:#FFCC00;
border:20px solid #D65C00;
float:left;
height:300px;
width:200px;
padding:30px;
}
/pre
/div
div id="content_2"
pre
#content_2
{
background:#CEEDFC;
border:20px solid #336699;
float:right;
height:300px;
padding:30px;
width:300px;
}
/pre
/div
div class="clear"
/div
img src="https://www.questions.com.cn/dnjc/michi.png" alt="米尺" /
/div
/body
/html

截圖：
【IE6盒子模型沒問題詳測雙倍邊距】

實驗2：驗證 IE6 雙倍邊距bug
渲染模式：標準模式
結論：標準模式時，IE6瀏覽器存在雙倍margin的bug，此時IE6、Firefox表現不一致。
代碼：

復制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans"
head
meta http-equiv="Content-Type" content="text/html;charset=utf-8" /
titlebox/title
style type="text/css"
.clear
{
clear:both;
}
pre
{
margin:0;
white-space:pre-wrap;
word-wrap:break-word;
}
#container
{
width:700px;
margin:0 auto;
}
#content_1
{
background:#FFCC00;
border:20px solid #D65C00;
float:left;
height:300px;
margin-left:10px;
margin-right:10px;
width:200px;
padding:30px;
}
#content_2
{
background:#CEEDFC;
border:20px solid #336699;
float:right;
height:300px;
padding:30px;
width:280px;
}
/style
/head
body
div id="container"
p已聲名DOCTYPE html ，即渲染模式：標準模式。
/p
p標準模式時，IE6瀏覽器存在雙倍margin的bug，此時IE6、Firefox表現不一致。
/p
pre
#container
{
width:700px;
margin:0 auto;
}
/pre
div id="content_1"
pre
#content_1
{
background:#FFCC00;
border:20px solid #D65C00;
float:left;
height:300px;
margin-left:10px;
margin-right:10px;
width:200px;
padding:30px;
}
/pre
/div
div id="content_2"
pre
#content_2
{
background:#CEEDFC;
border:20px solid #336699;
float:right;
height:300px;
padding:30px;
width:280px;
}
/pre
/div
div class="clear"
/div
img src="https://www.questions.com.cn/dnjc/michi.png" alt="米尺" /
/div
/body
/html

截圖：

把margin-left改為5px或更小，這時在IE6中表現正常了，說明的確是2倍margin了。

實驗3：IE6 雙倍邊距出現的情況
渲染模式：標準模式
結論：IE6瀏覽器中，在一行之內，
第1個元素float:left產生雙倍margin-left，第2個元素float:left，各個方向margin正常；
第1個元素float:left產生雙倍margin-left，第2個元素float:right，各個方向margin正常；
第1個元素float:right產生雙倍margin-right，第2個元素float:left產生雙倍margin-left（這個讓我很驚訝）；
上下margin正常。
代碼：

復制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hans" lang="zh-Hans"
head
meta http-equiv="Content-Type" content="text/html;charset=utf-8" /
titlebox/title
style type="text/css"
.clear
{
clear:both;
}
pre
{
margin:0;
white-space:pre-wrap;
word-wrap:break-word;
}
#container
{
width:700px;
margin:0 auto;
}
#content_1
{
background:#FFCC00;
border:20px solid #D65C00;
float:right;
height:300px;
margin-right:5px;
width:200px;
padding:30px;
}
#content_2
{
background:#CEEDFC;
border:20px solid #336699;
float:left;
height:300px;
margin-left:10px;
padding:30px;
width:280px;
}
/style
/head
body
div id="container"
p已聲名DOCTYPE html ，即渲染模式：標準模式。
/p
pIE6瀏覽器中，第1個元素float:right產生雙倍margin-right，第2個元素float:left產生雙倍margin-left；。Firefox顯示正常。
/p
pre
#container
{
width:700px;
margin:0 auto;
}
/pre
div id="content_1"
pre
#content_1
{
background:#FFCC00;
border:20px solid #D65C00;
float:right;
height:300px;
margin-right:5px;
width:200px;
padding:30px;
}
/pre
/div
div id="content_2"
pre
#content_2
{
background:#CEEDFC;
border:20px solid #336699;
float:left;
height:300px;
margin-left:10px;
padding:30px;
width:280px;
}
/pre
/div
div class="clear"
/div
img src="https://www.questions.com.cn/dnjc/michi.png" alt="米尺" /
/div
/body
/html

截圖：
第1個元素float:right產生雙倍margin-right，第2個元素float:left產生雙倍margin-left；