IE6盒子实体模型没难题 详测双倍边距

日期：2021-01-20 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

2010⑻⑴8

去腾迅招聘面试，问IE6。

前两天看的《IE6 很邪恶，但我爱它的盒子实体模型》，我说盒子实体模型怎样怎样，招聘面试官告知我IE5的盒子实体模型有难题，并不是IE6。

回家查查书，《Web规范实战演练》上说了，是IE5/Win的盒子实体模型有难题。来看CSS還是不足熟练。

特试验以下：

试验1：认证width、padding、border

3D渲染方式：规范方式

结果：规范方式时，IE6访问器选用W3C盒子实体模型，此时IE6、Firefox主要表现1致。

编码：


拷贝编码
编码以下:

<!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⑻" />
<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，即3D渲染方式：规范方式。
</p>
<p>规范方式时，IE6访问器选用W3C盒子实体模型，此时IE6、Firefox主要表现1致。
</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>

截图：

试验2：认证 IE6 双倍边距bug
3D渲染方式：规范方式
结果：规范方式时，IE6访问器存在双倍margin的bug，此时IE6、Firefox主要表现不1致。
编码：

拷贝编码
编码以下:

<!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⑻" />
<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，即3D渲染方式：规范方式。
</p>
<p>规范方式时，IE6访问器存在双倍margin的bug，此时IE6、Firefox主要表现不1致。
</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中主要表现一切正常了，表明确实是2倍margin了。

 

试验3：IE6 双倍边距出現的状况

3D渲染方式：规范方式

结果：IE6访问器中，在1行以内，

第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⑻" />
<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，即3D渲染方式：规范方式。
</p>
<p>IE6访问器中，第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="./michi.png" alt="米尺" />
</div>
</body>
</html>

截图：

第1个元素float:right造成双倍margin-right，第2个元素float:left造成双倍margin-left；

 

不申明DOCTYPE html时，访问器依照掺杂方式3D渲染；

申明DOCTYPE html时，访问器依照规范方式3D渲染。

 

IE6 掺杂方式时，3D渲染有甚么不一样？

招聘面试也问了，我没答上来。这个难题够独立开篇了。待学习培训。

上一篇：你不能不知道的CSS挑选器 返回下一篇：没有了