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

我有一个非常具体的布局来实现与HTML/CSS。基本上我有一个文本容器，里面有几个左浮动框。然后我有一个页脚，它需要在底部重叠这个文本容器几个像素。我通过在页脚上使用负顶边来实现此目的，并在文本容器和页脚上设置position:relative和z-index以使页脚层堆叠位于文本容器上方。Chrome和Firefox以不同的负边距呈现定位布局 - 如何防止？

它可以在小提琴最好的演示：http://jsfiddle.net/sW9cu/2/。

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

我基本上需要在IE7 +，Firefox和Chrome中以某种方式保持一致。不用打扰它 - 它可以清除或重叠，但它需要表现相同，无论浏览器如何。

任何人都可以看到它为什么这样做以及如何纠正它？这可能与我在文本容器上使用的微观清除修复有关，但我确实不确定。

感谢任何指针人 - 这一个让我难住！

来源

2013-01-24 Dan

排序。我无法克服目前的加价问题，但通过消除负面的顶部位置并在页脚内添加一个绝对定位的div，其顶部值为负值（top: -20px;），这已达到我所期望的水平。参见：http://jsfiddle.net/sW9cu/4/。

来源

2013-01-24 15:14:21 Dan

-4

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

的Internet Explorer，Firefox和WebKit的三种不同的东西。 Safari和Chrome使用Webkit。 moz适用于Mozilla o适用于Opera “正常”适用于Internet Explorer。

你可以阅读更多关于here

来源

2013-01-24 11:33:31 souichiro

谢谢，但我认为你误解了。我不想用CSS3转换做任何事情。仅仅尝试在Firefox和Chrome等中实现相同的布局。如果您在这些浏览器中查看小提琴，您将看到不同之处。我只是需要他们渲染相同。 – Dan

链接只是一个例子。正如我所说，你应该只添加[webkit moz o ...]选项到你的css中，正如我所说的，每个浏览器都以不同的方式使用它，所以你可以实现你的目标（在每个浏览器中看起来都一样） – souichiro

http ：//webdesign.about.com/od/css/a/css-vendor-prefixes.htm是正确的地方，也在我的文章中进行了编辑。 – souichiro

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

回答

相关问题