我有一个非常具体的布局要用 HTML/CSS 实现。基本上我有一个文本容器，里面有几个左浮动的框。然后我有一个页脚需要在底部与这个文本容器重叠几个像素。我通过在页脚上使用负上边距并在文本容器和页脚上设置 position:relative 和 z-index 使页脚层堆叠在文本容器上方来实现这一点。
它可以在 fiddle 中得到最好的展示:http://jsfiddle.net/sW9cu/2/ .
问题是在 IE9 和 Firefox 18 中页脚的内容清除了文本框的内容，而在 Chrome 中页脚的内容覆盖了文本框的内容而没有任何清除。
我基本上需要它在 IE7+、Firefox 和 Chrome 中以一种或另一种方式保持一致。不管哪种方式 - 它可以清除或重叠，但无论浏览器如何，它都需要表现相同。
谁能看出它为什么这样做以及如何纠正它？这可能与我在文本容器上使用的 micro clear fix 有关，但我真的不确定。
感谢大家的指点 - 这个让我难住了!
最佳答案
排序。我无法解决当前标记的问题，但通过删除负顶部位置并在页脚内添加一个绝对定位的 div，顶部值为负 (top: -20px;)实现了我正在寻找的东西。请参阅:http://jsfiddle.net/sW9cu/4/ .
关于css - Chrome 和 Firefox 以不同的方式呈现负边距的定位布局 - 如何防止？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14500150/