Firefox不会按预期呈现A标记的宽度和高度属性

Question

我的目标是制作一个按钮。我希望文本垂直位于图像中间，水平偏移22px。图像为144像素×29像素。这是代码：

CSS：

<style type="text/css">
a.button{
width:144px;
height:29px;
background-image:url('images/btnOff.gif');
color:#000;
text-decoration:none;
line-height:28px;
padding-left:22px;
}

a:hover.button{
background-image:url('images/btnOn.gif');
}

HTML：

<a href="download.php" class="button">Download</a>

它完全按照我在IE中的预期工作，但在FF中，我只是显示了一些背景图像的文本（没有新的行高），文本后面的图像的右侧是砍掉了。在我看来，高度，宽度和线高都没有得到适当的应用。

我做错了吗？有没有更好的方法来实现我的目标？

Answer 1

添加以下代码：

display:block;

锚点是内联元素，因此通常不具有高度和宽度属性。

一旦它是块，不要使用行高，只需像往常一样使用盒子模型。外部边缘，内部填充，以及任何其他必要的高度/宽度。