IE双倍浮动边界Bug -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> IE双倍浮动边界Bug

IE双倍浮动边界Bug

浏览:2137次出处信息

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

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：闲谈CSS3动画

后一篇：CSS实现HTML元素透明的那些事 >>

文章信息

作者：simaopig 来源：小小子，simaopig
标签： IE 浮动
发布时间：2010-05-27 13:26:08

建议继续学习

近3天十大热文