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;

锚是内联元素,因此通常不具有高度和宽度属性.

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