您现在的位置是：网站首页> 编程资料编程资料

IE6盒子模型没问题 详测双倍边距 _CSS教程_CSS_网页制作_

2023-10-30 122人已围观

简介 前两天看的《IE6 很邪恶，但我爱它的盒子模型》，我说盒子模型如何如何，面试官告诉我IE5的盒子模型有问题，不是IE6。

2010-8-18

去腾讯面试，问IE6。

前两天看的《IE6 很邪恶，但我爱它的盒子模型》，我说盒子模型如何如何，面试官告诉我IE5的盒子模型有问题，不是IE6。

回来查查书，《Web标准实战》上说了，是IE5/Win的盒子模型有问题。看来CSS还是不够精通。

特实验如下：

实验1：验证width、padding、border

渲染模式：标准模式

结论：标准模式时，IE6浏览器采用W3C盒子模型，此时IE6、Firefox表现一致。

代码：


复制代码
代码如下:





box




已声名DOCTYPE html，即渲染模式：标准模式。


标准模式时，IE6浏览器采用W3C盒子模型，此时IE6、Firefox表现一致。 



#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; 
}




米尺




截图：

实验2：验证 IE6 双倍边距bug
渲染模式：标准模式
结论：标准模式时，IE6浏览器存在双倍margin的bug，此时IE6、Firefox表现不一致。
代码：

复制代码
代码如下:





box




已声名DOCTYPE html，即渲染模式：标准模式。


标准模式时，IE6浏览器存在双倍margin的bug，此时IE6、Firefox表现不一致。 



#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; 
}




米尺




截图：

 

把margin-left改为5px或更小，这时在IE6中表现正常了，说明的确是2倍margin了。

 

实验3：IE6 双倍边距出现的情况

渲染模式：标准模式

结论：IE6浏览器中，在一行之内，

第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正常。

代码：

复制代码
代码如下:





box




已声名DOCTYPE html，即渲染模式：标准模式。


IE6浏览器中，第1个元素float:right产生双倍margin-right，第2个元素float:left产生双倍margin-left；。Firefox显示正常。 



#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; 
}




米尺




截图：

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

 

不声明DOCTYPE html时，浏览器按照混杂模式渲染；

声明DOCTYPE html时，浏览器按照标准模式渲染。

 

IE6 混杂模式时，渲染有什么不同？

面试也问了，我没答上来。这个问题够单独开篇了。待学习。

上一篇：CSS hover不起作用的原因 _CSS教程_CSS_网页制作_

下一篇：DIV+CSS布局也需要注意的SEO原则_Div+CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网