如何将锚标记设置为与按钮高度相同的按钮？

Question

我正在努力改变我的网站上的按钮,以jquery ui主题为样式.一切都很顺利.

但是我想要一些锚标签作为按钮.我添加了类,它按照我想要的方式设置它,除了高度不一样.有没有办法让样式锚标签与样式按钮标签具有相同的高度？

这是我的一些css:

.mine-button { 
    outline: 0; 
    margin: 0 4px 0 0;
    padding: 0 1em;
    height: 2em;
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative;
    text-align: center; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px
}

在按钮上使用它的示例:

<button class="mine-button ui-state-default"
 onclick="stuff here">
    <img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add
</button>

在achor上使用它的一个例子:

<a class="mine-button ui-state-default" href="bla">
    <img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free
</a>

Answer 1

这应该这样做:

display: inline-block;

您的高度不起作用的原因是锚标记标记内联元素.该height属性不适用于内联元素,垂直边距,边框和填充的行为也不同.

Firefox 2不支持inline-block,如果您仍然需要支持它,但通常可以通过在上面的行之前添加规则来使其工作.display:-moz-inline-box

或者,您可以尝试使用该line-height属性.