IE双倍浮动边界Bug

小小子，simaopig 2010-05-27 13:26:08 累计浏览 2,946 次

本机暂存

内容概览

这篇讲的是IE浏览器下那个经典的“双倍浮动边界”Bug。作者在啃《CSS实战精粹》一书时，专门花了时间研究各种CSS Hack，而这个Bug就是其中绕不过去的一道坎。

问题很具体：当一个元素设置了浮动（float）和左侧（或右侧）的外边距（margin）时，在IE5.x和IE6的怪异模式下，这个外边距会被双倍计算。比如，你只想让它左边空出10px，它却实际空出了20px，布局瞬间崩坏。根因在于IE的旧版渲染引擎对盒模型的解析与现代标准不同，它将浮动元素的margin边界也纳入了总宽度的计算范畴。

经典的解决方案是给浮动元素增加`display: inline;`属性。因为浮动元素本身会变成块级框，加上`inline`并不影响其浮动行为，但却能神奇地让IE“收手”，只计算一次外边距。这个Hack看似简单，背后却是对浏览器渲染差异的深刻理解。

掌握这类针对特定浏览器的“奇技淫巧”，在如今看来或许有些复古。但它揭示的跨浏览器兼容性思维——理解不同渲染引擎的工作逻辑，并用创造性的方式达成一致——在面对任何前端新旧技术融合时，依然是一种宝贵的能力。

看《CSS实战精粹》已经看到hack了，之所以最近没有把文章抄上来，一是懒，二就是比较困惑。

对CSS我属于白痴一样，所以看书中介绍的例子，解决了某某样式BUG，对此我一头雾水，所以我决定将书中提到的一些Bug给弄出来看一下到底是如何让人头疼的一个问题。

第一篇，大家一起来看一下“IE双倍浮动边界Bug”，高手请飘过~~

Bug 描述

The IE5/6 Doubled Float-Margin Bug

中文翻译版，无图

大家通过上面提供的链接很方便知道现象的描述。不过在英文原版里Bug的图示并不说明问题(图中并未显示出IE6margin双边距)。

那么让我们自己动手来看一下吧。

以下是代码片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>IE Double Margin Bug</title>
        <style>
            #wrapper{
                width:400px;
                height:160px;
                border:1px solid red;
                background:blue;
            }

            #bugdiv{
                width:150px;
                float:left;
                margin:5px 0 5px 100px;
                height:150px;
                background:green;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="bugdiv">
                I’m in bugdiv
            </div>
        </div>
    </body>
</html>

大家请用IE6打开

IE6下面的效果如图：

效果图大家已经看到了，200px，很神奇。解决方法很简单，在有浮动的元素上加上display:inline;搞定

以下是代码片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>IE Double Margin Bug</title>
        <style>
            #wrapper{
                width:400px;
                height:160px;
                border:1px solid red;
                background:blue;
            }

            #bugdiv{
                width:150px;
                float:left;
                margin:5px 0 5px 100px;
                height:150px;
                background:green;
                display:inline;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="bugdiv">
                I’m in bugdiv
            </div>
        </div>
    </body>
</html>

ie6_double_margin_fixed

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

50个活力和动感的网页设计－颜色的灵感（累计阅读 34,442）
视觉设计前瞻实用性研究（PNVD）第二期（累计阅读 12,977）
各公司对前端开发的职位描述（累计阅读 10,405）
iframe大小自适应（累计阅读 10,057）
浏览器的渲染原理简介（累计阅读 8,377）
解决IE6从Nginx服务器下载图片不Cache的Bug （累计阅读 8,357）
iframe里src="about:blank"的问题。（累计阅读 8,089）
程序员眼里IE浏览器是什么样的（累计阅读 8,011）
2010网页设计趋势（累计阅读 7,818）
Web前端工程师编程能力飞升之路（累计阅读 7,691）