Question

我遇到的问题是，正在应用于div的边距似乎也只应用于FireFox中的文档正文。

在互联网上的一些谷歌搜索似乎提到了崩溃的边缘，虽然可能是这种情况，但我不认为我完全理解正在发生的事情。

我创建了一个示例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）< / p>

Answer 1

它与折叠边距有关。将overflow:auto添加到表单中，您会看到问题消失。

<强> jsFiddle example

Answer 2

这真的很奇怪。它告诉你，当你从p中移除浮动时，它按预期工作。

出于某种原因，当Firefox计算身体上的边缘崩溃时，它会向身体而不是子元素添加边距。我猜这是一个小故障，虽然我没有仔细检查规格。

肯定是一个小故障的部分是Firefox没有完全计算应用于子div的clear:both，因为如果它确实了hello world边缘崩溃将不会应用于body。当子p设置为clear:none时，外部包含div将自动设置为float，这很奇怪但是预期。但是，当第二个子div设置为clear:both时，显然会出现问题。我怀疑你会找到这个部分的合理答案，因为它几乎肯定是Firefox渲染中的一个错误。

长话短说，您可能在Firefox'渲染中发现了不止一个但只有两个错误。

Answer 3

*{margin:0; padding:0;}了解所有内容，并为每种内容提供样式或仅为您的表单提供“form {margin:0; padding:0;}

Answer 4

您可能需要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; }

仅在FireFox中靠近文档顶部的原因不明的空间

4 个答案: