IE6盒子模型沒問題 詳測雙倍邊距
發(fā)布時間：2010-08-27 02:10:27 作者：佚名 
我要評論
我要評論前兩天看的《IE6 很邪惡，但我愛它的盒子模型》，我說盒子模型如何如何，面試官告訴我IE5的盒子模型有問題，不是IE6。
2010-8-18
去騰訊面試，問IE6。
前兩天看的《IE6 很邪惡，但我愛它的盒子模型》，我說盒子模型如何如何，面試官告訴我IE5的盒子模型有問題，不是IE6。
回來查查書，《Web標(biāo)準(zhǔn)實戰(zhàn)》上說了，是IE5/Win的盒子模型有問題?？磥鞢SS還是不夠精通。
特實驗如下：
實驗1：驗證width、padding、border
渲染模式：標(biāo)準(zhǔn)模式
結(jié)論：標(biāo)準(zhǔn)模式時，IE6瀏覽器采用W3C盒子模型，此時IE6、Firefox表現(xiàn)一致。
代碼：
<!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" />
<title>box</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，即渲染模式：標(biāo)準(zhǔn)模式。
</p>
<p>標(biāo)準(zhǔn)模式時，IE6瀏覽器采用W3C盒子模型，此時IE6、Firefox表現(xiàn)一致。
</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="./michi.png" alt="米尺" />
</div>
</body>
</html>
渲染模式：標(biāo)準(zhǔn)模式
結(jié)論：標(biāo)準(zhǔn)模式時，IE6瀏覽器存在雙倍margin的bug，此時IE6、Firefox表現(xiàn)不一致。
代碼：
<!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" />
<title>box</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，即渲染模式：標(biāo)準(zhǔn)模式。
</p>
<p>標(biāo)準(zhǔn)模式時，IE6瀏覽器存在雙倍margin的bug，此時IE6、Firefox表現(xiàn)不一致。
</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="./michi.png" alt="米尺" />
</div>
</body>
</html>
<!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" />
<title>box</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，即渲染模式：標(biāo)準(zhǔn)模式。
</p>
<p>IE6瀏覽器中，第1個元素float:right產(chǎn)生雙倍margin-right，第2個元素float:left產(chǎn)生雙倍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="./michi.png" alt="米尺" />
</div>
</body>
</html>
去騰訊面試，問IE6。
前兩天看的《IE6 很邪惡，但我愛它的盒子模型》，我說盒子模型如何如何，面試官告訴我IE5的盒子模型有問題，不是IE6。
回來查查書，《Web標(biāo)準(zhǔn)實戰(zhàn)》上說了，是IE5/Win的盒子模型有問題?？磥鞢SS還是不夠精通。
特實驗如下：
實驗1：驗證width、padding、border
渲染模式：標(biāo)準(zhǔn)模式
結(jié)論：標(biāo)準(zhǔn)模式時，IE6瀏覽器采用W3C盒子模型，此時IE6、Firefox表現(xiàn)一致。
代碼：
復(fù)制代碼
代碼如下:<!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" />
<title>box</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，即渲染模式：標(biāo)準(zhǔn)模式。
</p>
<p>標(biāo)準(zhǔn)模式時，IE6瀏覽器采用W3C盒子模型，此時IE6、Firefox表現(xiàn)一致。
</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="./michi.png" alt="米尺" />
</div>
</body>
</html>
截圖：
渲染模式：標(biāo)準(zhǔn)模式
結(jié)論：標(biāo)準(zhǔn)模式時，IE6瀏覽器存在雙倍margin的bug，此時IE6、Firefox表現(xiàn)不一致。
代碼：
復(fù)制代碼
代碼如下:<!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" />
<title>box</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，即渲染模式：標(biāo)準(zhǔn)模式。
</p>
<p>標(biāo)準(zhǔn)模式時，IE6瀏覽器存在雙倍margin的bug，此時IE6、Firefox表現(xiàn)不一致。
</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="./michi.png" alt="米尺" />
</div>
</body>
</html>
截圖：
把margin-left改為5px或更小，這時在IE6中表現(xiàn)正常了，說明的確是2倍margin了。
實驗3：IE6 雙倍邊距出現(xiàn)的情況
渲染模式：標(biāo)準(zhǔn)模式
結(jié)論：IE6瀏覽器中，在一行之內(nèi)，
第1個元素float:left產(chǎn)生雙倍margin-left，第2個元素float:left，各個方向margin正常；
第1個元素float:left產(chǎn)生雙倍margin-left，第2個元素float:right，各個方向margin正常；
第1個元素float:right產(chǎn)生雙倍margin-right，第2個元素float:left產(chǎn)生雙倍margin-left（這個讓我很驚訝）；
上下margin正常。
代碼：
復(fù)制代碼
代碼如下:<!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" />
<title>box</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，即渲染模式：標(biāo)準(zhǔn)模式。
</p>
<p>IE6瀏覽器中，第1個元素float:right產(chǎn)生雙倍margin-right，第2個元素float:left產(chǎn)生雙倍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="./michi.png" alt="米尺" />
</div>
</body>
</html>
截圖：
第1個元素float:right產(chǎn)生雙倍margin-right，第2個元素float:left產(chǎn)生雙倍margin-left；
不聲明DOCTYPE html時，瀏覽器按照混雜模式渲染；
聲明DOCTYPE html時，瀏覽器按照標(biāo)準(zhǔn)模式渲染。
IE6 混雜模式時，渲染有什么不同？
面試也問了，我沒答上來。這個問題夠單獨開篇了。待學(xué)習(xí)。
相關(guān)文章
網(wǎng)頁里的兩種盒子模型(W3C盒子模型、IE盒子模型)
網(wǎng)頁里有兩種盒子模型標(biāo)準(zhǔn)一是W3C盒子模型；二是IE盒子模型（IE瀏覽器默認的模型）下面就用公式來區(qū)分這兩種不同的盒子模型2013-09-08- 相信每一個從事web開發(fā)的人對盒子模型都有一個特殊的理解吧，本文也有一個理解并附有示例代碼，喜歡的朋友可以參考下2013-08-30
- 本章將介紹CSS3中各種盒的知識點；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況2013-04-24
- 本章將介紹CSS3中各種盒的知識點；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況2013-04-24
- 盒子模型，是XHTML+CSS布局頁面中的核心！要想學(xué)會用CSS布局頁面，就首先要理解盒子模型！2010-01-07
css的核心內(nèi)容 標(biāo)準(zhǔn)流、盒子模型、浮動、定位等分析
css的核心內(nèi)容：標(biāo)準(zhǔn)流、盒子模型、浮動、定位（可以說不理解這些概念絕做不出合適的網(wǎng)頁）2009-12-21- 剛剛看了css教程覺得很形象就貼出來了。想學(xué)習(xí)的朋友可以參考下。2009-10-15
- 網(wǎng)頁制作Webjx文章簡介：盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 IE 盒子模型和標(biāo)準(zhǔn) W3C 盒子模型。2009-04-02
HTML和CSS的關(guān)鍵:盒子模型(Box model)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
原文：http://jorux.com/archives/property-4-if-you-love-css/ 本文作為屬性篇的最后一篇文章, 將講述HTML和CSS的關(guān)鍵—盒子模型(Box model). 理解Box model的關(guān)2008-10-17