奇怪的Firefox负边距问题

Question

我发现了Firefox 4.0.1（Opera 11.5也有此问题）的一个奇怪的bug，因此我创建了这个示例以显示问题：
如果在safari中查看，一切都很好，但是当我在Firefox或Opera中打开它时，在具有负边距的div内部的图像仍然占据下面的div中的空间。
有人知道如何解决吗？
http://jsfiddle.net/whYC7/

- Sarathi

Answer 1

这是CSS规范的正确呈现方式。负边距意味着红色div的顶部比通常情况下高，但一旦确定了它的顶部位置，文本的位置就取决于浮动对象和div的交集处。详见http://www.w3.org/TR/CSS21/visuren.html#floats中以“A line box is next to a float”开头的段落。

你可能需要在这里向WebKit报告一个错误。

- Boris Zbarsky

---

实际上，自大约5年前起，WebKit就有一个错误文件：https://bugs.webkit.org/show_bug.cgi?id=10900 - Boris Zbarsky

Answer 2

一个在大多数情况下可行的解决方法是将您的 div 元素的位置设置为绝对定位，然后使用 top/left/right/bottom 属性来控制其位置。

- RunLoop

Answer 3

我在FF和IE9中也遇到了这个问题...一个绝对定位的div似乎不能识别负边距，但是在FF 12和ie9中使用top:100px而不是margin-top:-100px似乎可以解决问题

- Dan Beil