奇怪的 Firefox 负边距

Posted 2023-03-06

【中文标题】奇怪的 Firefox 负边距

【英文标题】：Weird Firefox negative margins

【发布时间】：2011-10-11 08:58:03

【问题描述】：

我在 Firefox 4.0.1 中发现了一个奇怪的错误（它也发生在 Opera 11.5 中），所以我创建了这个示例来说明问题：

http://jsfiddle.net/whYC7/

如果在 safari 中查看，一切看起来都很好，但是当我在 Firefox 或 Opera 中打开它时，div 内带有负边距的图像仍会占用下方 div 中的空间。

有人知道解决这个问题的方法吗？

【参考方案1】：

这是符合 CSS 规范的正确渲染。负边距意味着红色 div 的顶部高于其他情况，但是一旦确定它的顶部是文本的位置，就取决于浮点数和 div 的交集。请参阅http://www.w3.org/TR/CSS21/visuren.html#floats 以“A line box is next to a float”开头的段落。

您可能想在此处提交有关 WebKit 的错误。

【讨论】：

事实上，从大约 5 年前开始，WebKit 就有一个 bug：bugs.webkit.org/show_bug.cgi?id=10900

【参考方案2】：

我在 FF 和 IE9 中也遇到过这个问题...绝对定位的 div 似乎无法识别负边距，尽管使用 top:100px 而不是 margin-top:-100px 似乎在 FF 12 中有效和ie9

【参考方案3】：

在大多数情况下可行的解决方法是使您的 div 的位置为绝对，然后使用 top/left/right/bottom 来控制位置