简明现代魔法 -> CSS层叠样式表 -> IE6盒模型双倍边距测试

IE6盒模型双倍边距测试

2010-08-28

网上很多资料都说IE6的盒子模型有问题,其实是IE5的盒子模型有问题,IE6的没问题。

下面做实验如下:

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

IE6:

Firefox:

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

IE:

Firefox:

把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。
<!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;

IE:

Firefox:

不声明DOCTYPE html时,浏览器按照混杂模式渲染;声明DOCTYPE html时,浏览器按照标准模式渲染。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们