2

我遇到了一个问题，即应用于 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 中仍然存在）

4

4 回答 4

3

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

jsFiddle 示例

于 2013-04-05T20:47:54.430 回答
1

这真的很奇怪。说明当您从 p 中移除浮动时，它会按预期工作。

出于某种原因，当 Firefox 计算主体上的边距折叠时，它会将边距添加到主体而不是子元素。我猜这是一个小故障，尽管我没有仔细检查规范。

肯定是一个小故障的部分是 Firefox 没有完全计算clear:both应用于子 div 的值，因为如果这样做，hello world 边距崩溃将不会应用于 body。clear:none当子 p设置为 时，外部包含的 div 将自动设置为float，这很奇怪，但在意料之中。但是，当第二个子 div 设置为 时clear:both，显然有些事情会变得很糟糕。我怀疑你会为这部分找到一个合乎逻辑的答案，因为它几乎可以肯定是 Firefox 渲染中的一个错误。

长话短说，您可能在 Firefox 的渲染中发现了两个错误，而不是一个。

于 2013-04-05T21:14:47.850 回答
0

*{margin:0; padding:0;} 一切都可以为每个人提供风格或只为您的形式提供“form {margin:0; padding:0;}

于 2013-04-05T21:20:02.673 回答
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 回答