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="/images/defaultpic.gif" /
/div
/body
/html

截图：

实验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;

IE6盒子模型没问题详测双倍边距

推荐阅读

乳腺周围有疼痛要警惕什么病乳腺周围有疼痛要警惕什么

解决点烟器手机充电慢

法斗怎么一直发抖

面包车折叠座椅怎么处罚?

冰箱冷藏室结冰怎么办 3招教你如何解决冷藏室结冰问题

QQ空间黄钻加速卡怎么使用

永生花更深情女神节送永生花好还是鲜花好永生花一生只能送一次，女神节送闺蜜什么花好？

如何让腰和肚子三天内变瘦、变小！

华为手环4pro支持通话吗

拼多多发货快吗

动森圆木沙发diy怎么得到

洗澡的花洒堵了怎么办

去国外怎么换美元出国旅行怎么换美元

micro sd卡是什么意思啊

四川平行志愿是什么,平行志愿在填报时有什么技巧

车展怎么买车

IE6盒子模型没问题 详测双倍边距

推荐阅读

IE6盒子模型没问题详测双倍边距