Mysql query error : | SQL : set names utf8 IE双倍浮动边界Bug -- CSS/HTML -- IT技术博客大学习 -- 共学习 共进步！
    技术头条 - 一个快速在微博传播文章的方式     
您现在的位置：首页 --> CSS/HTML --> IE双倍浮动边界Bug

IE双倍浮动边界Bug

浏览:2724次  出处信息

看《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下面的效果如图：

ie6_double_margin_bug

效果图大家已经看到了，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

ie6_double_margin_fixed

 

建议继续学习：

  1. 程序员眼里IE浏览器是什么样的    (阅读：7723)
  2. 浮动引起的文本重影    (阅读：5143)
  3. 用 javascript 判断 IE 版本号    (阅读：4567)
  4. IE BUG相关文章集合    (阅读：4612)
  5. OverFlow -- 创建BFC,清除浮动    (阅读：3740)
  6. 一个IE6下重复加载的BUG    (阅读：3748)
  7. CSS实现HTML元素透明的那些事    (阅读：3698)
  8. IE8开发人员工具如何嵌入浏览器    (阅读：3422)
  9. IE下json格式的一小点需要注意的地方    (阅读：3214)
  10. 从IE 9的广告说起    (阅读：2919)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：闲谈CSS3动画
后一篇：CSS实现HTML元素透明的那些事 >>
文章信息
© 2009 - 2025 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1