Css Chrome和Firefox以不同的方式呈现负边距布局-如何防止？

我有一个非常具体的布局来实现HTML/CSS。基本上我有一个文本容器，里面有几个左浮动框。然后我有一个页脚，它需要在底部与这个文本容器重叠几个像素。我通过在页脚上使用负上边距，并在文本容器和页脚上设置

position:relative

和z-index，使页脚层堆叠在文本容器上方来实现这一点

最好用小提琴来演示：

问题在于，在IE9和Firefox 18中，页脚的内容会清除文本框的内容，而在Chrome中，页脚的内容会覆盖文本框的内容而不进行任何清除

我基本上需要在IE7+、Firefox和Chrome中保持一致，不管怎样。不必担心哪种方式——它可以是清晰的，也可以是重叠的，但不管浏览器是什么，它都需要有相同的行为

有人能看到它为什么这样做，以及如何纠正它吗？这可能与我在文本容器上使用的micro clear修复有关，但我真的不确定

---

谢谢大家的指点——这一点让我很难堪

据我所知，答案应该是CSS中的WebKit

Internet Explorer、Firefox和WebKit是三种不同的东西。 Safari和Chrome使用Webkit。 moz是为Mozilla设计的 代表歌剧 “正常”是指Internet Explorer

---

您可以阅读有关排序的更多信息。我无法克服当前标记的问题，但通过删除负的顶部位置，并在页脚内添加一个绝对定位的div，该div具有负的顶部值（

top:-20px；

），实现了我的目标。请看：。

谢谢，但我想你误解了。我不想对CSS3转换做任何事情。仅仅是试图在Firefox和Chrome等浏览器中实现相同的布局。如果你在这些浏览器中查看fiddle，你就会看到不同之处。我只需要他们呈现相同的。链接只是一个很好的例子。你应该在css中添加[webkit moz o…]选项，正如我所说的，每个浏览器使用它的方式都不同，因此你可以将你的目标（在每个浏览器中看起来都一样）设定在正确的位置，并在我的帖子中对其进行编辑。谢谢，但我宁愿找出问题并加以解决，而不是到处添加供应商前缀。我知道，这就是问题所在。因为W3C没有给出适当的标准，所以每个浏览器都使用另一种方法intern。有了这种干净的款式，一切都会好起来，你可以放心。