欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2010-08-27 02:10:27   作者:佚名   我要評論
前兩天看的《IE6 很邪惡,但我愛它的盒子模型》,我說盒子模型如何如何,面試官告訴我IE5的盒子模型有問題,不是IE6。
2010-8-18

去騰訊面試,問IE6。

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

回來查查書,《Web標(biāo)準(zhǔn)實(shí)戰(zhàn)》上說了,是IE5/Win的盒子模型有問題??磥鞢SS還是不夠精通。

特實(shí)驗(yàn)如下:

實(shí)驗(yàn)1:驗(yàn)證width、padding、border

渲染模式:標(biāo)準(zhǔn)模式

結(jié)論:標(biāo)準(zhǔn)模式時(shí),IE6瀏覽器采用W3C盒子模型,此時(shí)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)模式時(shí),IE6瀏覽器采用W3C盒子模型,此時(shí)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>

截圖:

實(shí)驗(yàn)2:驗(yàn)證 IE6 雙倍邊距bug
渲染模式:標(biāo)準(zhǔn)模式
結(jié)論:標(biāo)準(zhǔn)模式時(shí),IE6瀏覽器存在雙倍margin的bug,此時(shí)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)模式時(shí),IE6瀏覽器存在雙倍margin的bug,此時(shí)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或更小,這時(shí)在IE6中表現(xiàn)正常了,說明的確是2倍margin了。

 

實(shí)驗(yàn)3:IE6 雙倍邊距出現(xiàn)的情況

渲染模式:標(biāo)準(zhǔn)模式

結(jié)論:IE6瀏覽器中,在一行之內(nèi),

第1個(gè)元素float:left產(chǎn)生雙倍margin-left,第2個(gè)元素float:left,各個(gè)方向margin正常;

第1個(gè)元素float:left產(chǎn)生雙倍margin-left,第2個(gè)元素float:right,各個(gè)方向margin正常;

第1個(gè)元素float:right產(chǎn)生雙倍margin-right,第2個(gè)元素float:left產(chǎn)生雙倍margin-left(這個(gè)讓我很驚訝);

上下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個(gè)元素float:right產(chǎn)生雙倍margin-right,第2個(gè)元素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個(gè)元素float:right產(chǎn)生雙倍margin-right,第2個(gè)元素float:left產(chǎn)生雙倍margin-left;

 

不聲明DOCTYPE html時(shí),瀏覽器按照混雜模式渲染;

聲明DOCTYPE html時(shí),瀏覽器按照標(biāo)準(zhǔn)模式渲染。

 

IE6 混雜模式時(shí),渲染有什么不同?

面試也問了,我沒答上來。這個(gè)問題夠單獨(dú)開篇了。待學(xué)習(xí)。

相關(guān)文章

最新評論