3

私は今日、職場でこの異常な Firefox のみの CSS バグに遭遇しました (私の知る限り、Safari と Chrome のみをチェックし、Firefox 3.6 を使用していました)。 :

<!DOCTYPE html>
<head>
    <style>
    /*
     * A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
     * added just to make sure it's not from weird browser padding/margin. Still happens
     * if this is removed though
     */
    html, body, div, span, p, ul, li {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        background: transparent;
    }

    body {
        line-height: 1;
    }

    li {
        list-style: none;
    }

    body {
        color: #333;
        font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
        line-height: 1.3;
    }

    /* Some clearfix code from HTML5 Boilerplate */
    .clearfix:before, .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }
    </style>
</head>
<body>
    <div style="padding: 20px; border: solid thin black;">Hello!</div>
    <div>
        <ul class="clearfix">
            <li style="float: left; padding: 5px; border: solid thin black;">There</li>
            <li style="float: left; padding: 5px; border: solid thin black;">should</li>
            <li style="float: left; padding: 5px; border: solid thin black;">be no</li>
            <li style="float: left; padding: 5px; border: solid thin black;">margin</li>
            <li style="float: left; padding: 5px; border: solid thin black;">above</li>
            <li style="float: left; padding: 5px; border: solid thin black;">this</li>
            <li style="float: left; padding: 5px; border: solid thin black;">list</li>
        </ul>
        <p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
    </div>
</body>
</html>

これは、問題がどのように見えるかのスクリーンショットですスクリーンショット

したがって、ここで通常予想されることは、2 つ<div>の の間、または の上にマージンがない<ul>ことです。実際、Firebug の要素にカーソルを合わせると、マージン/パディングの色が表示されません。しかし、何らかの理由で、 の 30px のマージントップがと、それを含む<p>の両方に適用されて います。私の推測では、clearfix には何かバグがあると思います (実際、 clearing を使用すると、この問題は解消されます)。ありがとう！<p><div><br/>

4

3 に答える 3

2

しかし、言及されていない部屋の象は、少なくとも 3.6-6 (テスト済み) に影響する Firefox のフロート バグです。':after { content:"" }' (コンテンツは空または任意の型または空白) でスタイル設定された float コンテナーは、次の要素のマージントップを複製します! これは Firefox にのみ影響するようで、明らかにバグです。

簡単なテストケース:

<div class="container cf">
    <div class="floater"></div>
</div>
<div class="next">
    <p>Some content here!</p>
</div>

<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>

http://jsfiddle.net/TjW6c/394/

于 2011-08-28T20:33:27.163 に答える
1

クリアフィックスの権利を使用していません。positioniseverythingのclearfix（別名pie-clearfix）を使用することは、通常、すべてのclearfixに対する私の解決策です。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

あなたはここでそれをチェックすることができます：http：//jsfiddle.net/WVtYd/

于 2011-02-23T05:53:28.953 に答える