CSS定位不一致跨浏览器

我遇到了浏览器之间的一些定位不一致。我试图定位一个提交按钮，以便它悬停在textarea的下角。CSS定位不一致跨浏览器

在Chrome中，Safari和其他浏览器工作原理就像它应该：

Chrome Screenshot

然而，在Firefox中，我得到这个：

Firefox Screenshot

是否有不同定位该元素的方法，还是我让我的东西离开了我的CSS？

这里是链接到HTML和CSS：http://www.tylonius.com/clients/X10/GalleryDisplay.html

来源

2012-06-20 Ty Morton

CSS和HTML代码请 –

你是否在任何地方设置字体大小？尝试设置“html {font-size：1em;}”，这样整个页面的字体大小就会被标准化。它可能需要设置为100％或像16像素的绝对值。我有一阵子没有这样做，也不确定。 – kingcoyote

需要更多的信息，比如父容器的大小，因为它们可以在Chrome和Firefox中进行比较，以了解数学运算的关键位置。 – McAden

我刚刚将截图放入photoshop中，并测量了包含元素的底部填充。在顶部的图像是11px高。底部图像是13px。我猜这就是你的问题，但没有看到你的代码是不可能肯定的。尝试查看周围元素的CSS。我不认为<input>元素是你的问题。

编辑现在

，我可以看到你的代码，我敢肯定这个答案是正确的。问题是周围箱子的长度。你需要做的是从#gallery-commentform采取样式，并将其应用于包含表单的div。然后绝对将textarea和submit相对于左下角定位。这样，无论浏览器如何渲染height/padding/yaddayadda，它总是与表单底部的距离相同。

来源

2012-06-21 00:23:10

这是一个很好看的形式，顺便说一句 –

这和Brian的建议似乎已经做到了。 –

耶！很高兴我们可以帮助 –

我最近处理了很多这样的问题，我会做的第一件事是检查填充，边距和边框。我敢打赌，Firefox设置的某些默认属性与其他浏览器不同，因此您需要覆盖该属性。检查员的'计算样式'选项卡应该足以找出是否是这种情况。

来源

2012-06-20 23:45:20 OneThreeSeven

绝对地提交按钮的位置。

position: absolute; 
bottom: 0; 
right: 0;

确保它的父元素的位置被设置为relative。

来源

2012-06-21 01:58:22 iambriansreed

没有。绝对定位不适用于可折叠评论输入。如果这很简单，我不会打扰任何人。 :-) –

@TyMorton Yup。是的;在一个小提琴中抛出HTML/CSS，我会证明它。 – iambriansreed

我站好了！我以前曾尝试过，但父元素不是DIV，而是它的形式。当我将它设置为相对并尝试它时，它完美运行！ –

CSS定位不一致跨浏览器

回答

相关问题