css webkit bug：宽度为0的堆叠浮动和隐藏溢出答案

【问题标题】：css webkit bug: stacked floats with width 0 and hidden overflowcss webkit bug：宽度为0的堆叠浮动和隐藏溢出
【发布时间】：2010-10-16 06:50:37
【问题描述】：

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

<!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>

【问题讨论】：

这真的很有趣。我用 css 尝试了很多关于主题的变体，并得到了相同的结果。如果元素样式中的任何位置宽度为 0，则该元素的所有样式都将被忽略。我查看了标准和指南，找不到任何说明浏览器应该如何处理宽度为零或负值的内容。它不应该做的一件事是使其他所有内容无效，所以这绝对是 webkit 中的一个错误。
我查看了 webkit 的 bugzilla，已经提交了几个类似的 bug。不幸的是，很久以前（几年），目前的每晚仍然有这个错误。看来我将不得不诉诸一些肮脏的诡计:(（我认为这是一个 ie 独家）

标签： html css

【解决方案1】：

您是否启用了文档类型？页面目前处于怪癖模式。

【讨论】：

是的，我愿意。我更新了代码。不幸的是，Doctype 没有任何效果。

【解决方案2】：

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

【讨论】：