5

私はこの簡単な例を持っています：

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li class="clear"></li>
    </ul>
</header>
<section>section</section>

そして、このcssの部分：

BODY, HTML{
    margin: 0;
}
header{
    margin-bottom: 100px; /* section goes down */
}
UL{
    list-style-type: none;
}
UL LI{
    float: left;
    background: green;
}
.clear{
    clear: both;
    float: none;
}
section{
    background: red;
}

したがって、「ヘッダー」は左上隅にまっすぐ進み、次に100ピクセルのマージン、次に「セクション」に移動することを期待しています。期待どおりに動作するすべての主要なブラウザで、Firefox（バージョン16）では、「ヘッダー」が何らかの理由で余分なマージントップを取得します。

これはバグですか？

ここにjsfiddleの例があります：http：//jsfiddle.net/AvZek/2/

ところで、「clear」クラスの代わりにclearfixを使用した場合は、正常に機能します。

4

3 に答える 3

5

これは間違いなくバグです。マージンは絶対にそこにあるはずではありません。

  • Firebugによると、計算されたゼロ以外のマージンだけが、CSSの要素と同じmargin-bottom: 100pxであることがわかります。header他のすべてはゼロです。

  • FirebugのDOMインスペクターでさえ、それを識別するのに問題があります。自分自身を検査している場合を除いて、その領域が強調表示されることはありませんhtml（コンテンツ領域の一部として強調表示されます）。

たくさんのバグレポートが見つかりましたが、これはこのレポートの複製として閉じられており、さらに多くのテストケースがあります。さらに、少なくともFirefox2以降は存在しているようです。

于 2012-10-25T14:53:09.837 に答える
4

非セマンティックで不要な空の<li>-sでコードを汚染する代わりにoverflow: hidden、<ul>

HTML

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</header>
<section>section</section>

CSS

ul {
    list-style-type: none;
    overflow: hidden;
}

デモ

于 2012-10-25T14:25:59.220 に答える
0

{padding-bottom:100px;}これを達成するためにマージンの代わりに使用することができます..

于 2012-10-25T14:23:18.550 に答える