Firefox中按钮中的图像未对齐

Posted 2023-03-06

【中文标题】Firefox中按钮中的图像未对齐

【英文标题】：Image misaligned in buttons in firefox

【发布时间】：2013-02-09 17:11:39

【问题描述】：

我正在尝试将一些 div 转换为按钮。它们在 ie 和 chrome 上运行良好，但在 firefox 上运行良好，即使我将图像和 div 设置为相同大小，图像仍然比 div 大。图像也不会像在其他浏览器中那样触摸 div 的左边框。我尝试设置浏览器特定的 css 规则，但它似乎没有任何影响。有谁知道我该如何解决这个问题？顺便说一句，我目前只将第一个 div 转换为按钮。

听到我遇到问题的页面（按钮位于页面底部附近，标题为“恐惧/恐惧症”）： http://www.swanleyhypnotherapist.co.uk/

【问题讨论】：

把证明问题的最小值放到小提琴中。可能会得到一些帮助

我知道这并不能直接回答您的问题，但从语义的角度来看，使用<a> 标签而不是button 标签会更合适。

谢谢。我一开始没有这样做，因为我确定我以前在学校这样做时它没有用。虽然现在看来可以了。谢谢。

你可以使用背景图片吗？更好的是，CSS 精灵？那么你想使用什么样的元素（DIV、BUTTON、A等）并不重要，只要你能给元素一个display: inline-block或display: block属性。调整背景图像 (x, y) 的位置应该很简单。要将文本从背景图像移开（如果存在视觉冲突），请使用text-indent 调整背景图像和文本之间的距离。显然，如果你只是想让整个背景成为一张图片，你不必担心text-indent。

在我的 FireFox (19.0) 版本中，该按钮 - 以及所有按钮 - 看起来都很好。

【参考方案1】：

button.graphic 
    padding: 0,
    margin: 0,
    boder: 0

首先，你真的需要发帖code...