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

去騰訊面試,問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>
截圖:
把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正常。
代碼:
<!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