Question

此标记显示我的问题： Webkit浏览器似乎在浮动的父元素上创建了一个错误的宽度，当它们的宽度设置为0时，浮动/溢出：隐藏元素。是否有已知的解决方法？

<!DOCTYPE html>
<html>
<head>
    <title>float & width</title>
    <style type="text/css">

        div {
            float: left;
            height: 50px;
        }

        div.section {
            background-color: green;
        }

        div.section div.content {
            background-color: red;
            overflow: hidden;
        }

        p {
            clear: both;
        }

    </style>
</head>
<body>
<p>width: 0 => Bug</p>
<div class="section">
    <div class="content" style="width: 0;">some content that should not affect the parent div's width.</div>
</div>
<p>width: 1px => good</p>
<div class="section">
    <div class="content" style="width: 1px;">some content that should not affect the parent div's width.</div>
</div>
</body>
</html>

Answer 1

您是否启用了doctype？到目前为止，页面处于怪癖模式。

Answer 2

通过为外部元素提供一些宽度，可以获得一致的行为（至少在webkit和gecko之间）。有点拖累，但可行。

css webkit bug：堆叠浮点数，宽度为0，隐藏溢出

2 个答案: