兼容性—IE6下文字溢出

两个浮动元素之间用内联元素或者注释并且和父级宽度不超过3px，IE6下出产生文字溢出bug，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 400px;
        }
        .left{
            float: left;
            
        }
        .right{
            float: right;
            width: 400px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <span></span>
        <div class="right">&darr;这是多出了的一头猪</div>
    </div>
</body>
</html>

显示效果：

解决方案：

1、两个浮动元素之间避免出现内联元素或者注释

2、与父级宽度相差3px以上

.right{
            float: right;
            width: 397px;
}

 

posted @ 2017-05-14 18:08  影子疯  阅读(185)  评论(0)  编辑  收藏  举报