奇怪的 Firefox 负边距
我在 Firefox 4.0.1 中发现了一个奇怪的错误（在 Opera 11.5 中也发生了），所以我创建了这个示例来显示问题：
如果在 safari 中查看，一切看起来都很好，但是当我在 Firefox 或 Opera 中打开它时，div 内具有负边距的图像仍然占用空间下面的div。
有谁知道解决这个问题的方法吗？
I have discovered a strange bug in Firefox 4.0.1 (It also happend in Opera 11.5) so I've created this example to show the problem:
If viewed in safari everything looks fine, but when I open it in Firefox or Opera the image inside the div with a negative margin still takes up space in the div underneath.
Does anyone know of a way to fix this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是符合 CSS 规范的正确渲染。负边距意味着红色 div 的顶部比其他情况要高，但是一旦确定其顶部在哪里，文本的位置就取决于浮动和 div 的交集。请参阅http://www.w3.org/TR/CSS21/visuren.html#浮动以“行框位于浮动框旁边”开头的段落。
您可能想在此处提交 WebKit 上的错误。
This is the correct rendering per the CSS spec. The negative margin means that the top of the red div is higher than it would be otherwise, but once you determine where its top is the position of the text just depends on the intersection of the float and the div. See http://www.w3.org/TR/CSS21/visuren.html#floats the paragraph starting "A line box is next to a float".
You may want to file a bug on WebKit here.
我在 FF 和 IE9 中也遇到了这个问题...绝对定位的 div 似乎无法识别负边距，尽管使用 top:100px 而不是 margin-top:-100px 似乎在 FF 12 和 ie9 中有效
I have ran into this issues as well in FF and IE9...an absolute positioned div does not seem to recognize negative margins, though using top:100px instead of margin-top:-100px does seem to work in FF 12 and ie9
在大多数情况下可行的修复方法是使 div 的位置绝对，然后使用上/左/右/下来控制位置
A fix that could work in most cases is to make your div's position absolute and then to use top/left/right/bottom to control position