首页 / CSS/HTML

IE双倍浮动边界Bug

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

标签 IE 浮动

看《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

IE双倍浮动边界Bug

Bug 描述

建议继续学习