绝对值。 Button 内的定位元素未正确定位答案

【问题标题】：Abs. positioned element inside Button is not positioned correctly绝对值。 Button 内的定位元素未正确定位
【发布时间】：2011-05-27 13:51:53
【问题描述】：

我试图在按钮元素中放置一个图标，但在 Firefox 4 中我的定位很奇怪。查看此演示 http://jsfiddle.net/j6q2e/3/

它在 Chrome 和 IE 中按预期工作，但在 Firefox 中，该图标完全不保留。这是一个已知的错误吗？有办法解决吗？

（我不想使用<a>，因为它是表单的提交按钮，我想保持这种状态。我也想避免使用背景图像样式，因为图标位于 CSS 精灵中图像并用作背景图像，我必须将其另存为单独的 PNG。）

【问题讨论】：

我确定您注意到了这一点，并且它不一定有帮助，但是如果您将按钮的 padding 设置为 0 它就可以工作。疯狂的问题。
@newtron 您还可以将#icon 上的边距设置为margin: -4px 18px; 以使其在FF 中工作。当然，这搞砸了 IE :) 看起来问题是 IE 在填充之前获取偏移量，而 FF 从填充中获取偏移量。
看起来这是一个长期存在的 FF 错误，stackoverflow.com/questions/3213664/…
@james6848 谢谢，我最初搜索该主题时没有看到此线程。这真的很糟糕，但我想我将不得不使用一种解决方法。 :(

【解决方案1】：

只需快速更新即可“回答”此问题...

是的，这是 Firefox 中的一个错误，并且在版本 5 中仍然存在。Chrome、IE9 和 Opera 都正确地将图标定位在按钮内。

还有另一个SO thread 处理它，这里是the Mozilla bug。

【讨论】：

【解决方案2】：

您应该能够将其保留为精灵并将其用作背景图像，只需调整该图像周围的空间以允许您的按钮大小。您可能还想考虑diagonal sprites 来帮助解决您的问题。

【讨论】：