css webkit bug: stacked floats with width 0 and hidden overflow_问答_开发者

css webkit bug: stacked floats with width 0 and hidden overflow

开发者 https://www.devze.com 2023-01-20 05:09 出处：网络

This markup shows my problem: Webkit browsers seem to create an erroneous width on floated parent elements with floated/overflow:hidden elements inside, when their width is set to 0. Is there a known

相关专题：css

This markup shows my problem: Webkit browsers seem to create an erroneous width on floated parent elements with floated/overflow:hidden elements inside, when their width is set to 0. Is there a known workaround?

<!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="sect开发者_如何学编程ion">
    <div class="content" style="width: 1px;">some content that should not affect the parent div's width.</div>
</div>
</body>
</html>

Do you have a doctype enabled? Page is in quirks mode as of now.

One can get consistent behaviour (at least between webkit and gecko) by giving the outer element some width. Bit of a drag, but doable.