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挑选器 返回下一篇:没有了