css - 跨浏览器的 CSS 定位不一致

Question

我在浏览器之间遇到了一些定位不一致的问题。我正在尝试放置一个提交按钮，使其悬停在文本区域的下角。

在 Chrome、Safari 和其他浏览器中，这就像它应该的那样工作：

但是，在 Firefox 中，我得到了这个：

是否有不同的方法来定位该元素，或者我在 CSS 中遗漏了一些东西？

这是 HTMl 和 CSS 的链接：http ://www.tylonius.com/clients/X10/GalleryDisplay.html

Answer 1

绝对提交按钮的位置。

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

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

Answer 2

我最近一直在处理很多这样的问题，我要做的第一件事就是检查填充、边距和边框。我敢打赌，Firefox 设置的一些默认属性与其他浏览器不同，您需要覆盖它。检查器中的“计算样式”选项卡应该足以确定是否是这种情况。

Answer 3

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

编辑

现在我可以看到您的代码，我确定这个答案是正确的。问题是周围盒子的长度。您需要做的是从中获取样式#gallery-commentform并将其应用于包含表单的 div。然后绝对定位textareaadnsubmit相对于左下角。这样，无论浏览器如何呈现高度/填充/yaddayadda，它与表单底部的距离始终相同。