2

FireFox のみで、div に適用されているマージンがドキュメントの本文にも適用されているように見えるという問題があります。

インターネットでググると、マージンの崩壊に言及しているように見えますが、そうかもしれませんが、何が起こっているのか完全には理解していないと思います。

http://jsfiddle.net/davidwkennedy/3BQrw/の例を作成しました(FF で表示してから、他のブラウザーで比較します)。

   <body>
  <form id="form1" action="nothing">
     <div>
        <div>
           <p style="float:left; border:solid 1px red">Why is this text not anchored at the top of the page?</p>
           <div style="clear:both;"> </div>
        </div>
     </div>
     <div style="margin-top:100px;">
        <p>hello world</p>
     </div>
  </form>

誰かが何が起こっているのか理解するのを手伝ってくれませんか?

ありがとう

（編集：これを尋ねてからしばらく経ちましたが、FireFoxバージョンで更新したかったのです。最初にこれを書いたときに何を使用していたか思い出せませんが、この問題は26.0でもまだ発生しています）

4

4 に答える 4

3

これはマージンの崩壊に関連しています。フォームに追加overflow:autoすると、問題が消えます。

jsFiddle の例

于 2013-04-05T20:47:54.430 に答える
0

CSS リセットが必要な場合があります。Eric Meyer によってコード化されたこれを使用します。ベストショットです。構築を開始するすべてのサイトでこれを使用してみてください。CSS コードは次のとおりです (常にメイン CSS の先頭に配置するか、メイン CSS 内の @import として配置します)。これはあなたのフィドルで私のために働いた! 幸運！

a, abbr, acronym, address ,applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
    background: transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
}

ul {list-style: none; }
blockquote, q {quotes: none; }

table, table td {
    padding: 0;
    border: none;
    border-collapse: collapse;
}

img {vertical-align: top; }

embed {vertical-align: top; }

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display: block; }

mark, rp, rt, ruby, summary, time{display: inline; }
于 2013-04-05T21:54:44.763 に答える
0

*{margin:0; padding:0;} すべてにスタイルを与え、それぞれにスタイルを与えることも、フォームだけに与えることもできます」form {margin:0; padding:0;}

于 2013-04-05T21:20:02.673 に答える