作家
登录

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

作者: 来源:www.28hudong.com 2012-11-19 22:26:06 阅读 我要评论

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" /> <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,即渲染模式:标准模式。 </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="./michi.png" alt="米尺" /> </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" /> <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,即渲染模式:标准模式。 </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; 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 双倍边距出现的情况 渲染模式:标准模式 结论: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正常。 代码:复制代码代码如下: <!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,即渲染模式:标准模式。 </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时,浏览器按照混杂模式渲染; 声明DOCTYPE html时,浏览器按照标准模式渲染。   IE6 混杂模式时,渲染有什么不同? 面试也问了,我没答上来。这个问题够单独开篇了。待学习。

  推荐阅读

  让Firefox未载入图片显示边框

下面就是解决Firefox未载入图片不显示的解决办法:1.下载Stylish插件 https://addons.mozilla.org/zh-CN/firefox/addon/2108/2.安装并重启Firefox后,可以看到状态栏右侧有一个有S字母的灰色长方形图标,在此图标上>>>详细阅读


本文标题:IE6盒子模型没问题 详测双倍边距

地址:http://www.17bianji.com/kaifa2/CSS/16635.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)