如何将锚点样式设置为与按钮相同高度的按钮样式？

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>

使用它在一个锚点上的例子：

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

- Echo says Reinstate Monica

Answer 1

这应该可以做到：

display: inline-block;

你的高度不起作用的原因是锚点标记了一个内联元素。height属性不适用于内联元素，垂直边距、边框和填充的作用方式也不同。

Firefox 2不支持inline-block，如果你仍然需要支持它，但通常可以通过在上面一行添加规则display:-moz-inline-box来使其工作。

或者，您可以尝试使用line-height属性。

- mercator

---

在某些情况下（请阅读我的情况），我发现 display: block 比 inline-block 更好。 - Aba

Answer 2

border和align是已弃用的属性，或者至少这些属性与呈现有关，而不是内容，因此应该在CSS中完成，而不是在HTML代码中：

.mine-button {
  border: 0;
  vertical-align: bottom/middle/top/whatever;
}

此外，alt 是 img 元素的必填属性。它可以为空（对于花哨但无意义的图像使用 alt=""），也可以是有意义的（如果图像传达了文本中尚未出现的信息）。

- FelipeAls

---

谢谢。有时候我很匆忙，忘记修复我正在处理的旧HTML。 - Echo says Reinstate Monica