Как стилизовать тег привязки, чтобы он выглядел как кнопка с той же высотой, что и кнопка?

Question

Я работаю над изменением кнопок на моем сайте, чтобы они стилировались под тему пользовательского интерфейса jquery. В основном все идет хорошо с этим.

Но есть несколько якорных тегов, которые я хотел оформить в виде кнопок. Я добавил классы, и он стилизует их так, как я хочу, за исключением того, что высота не одинакова. Есть ли способ сделать тег стилизованного якоря той же высоты, что и тег стилизованной кнопки?

Вот некоторые из моих 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>

Answer 1

Это должно сделать это:

display: inline-block;

Причина, по которой ваш рост не работает, заключается в том, что тег привязки отмечает встроенный элемент. Свойство height не применяется к встроенным элементам, а вертикальные поля, границы и отступы действуют по-разному .

Firefox 2 не поддерживает inline-block, если вам все еще нужно его поддерживать, но вы можете заставить его работать , добавив правило display:-moz-inline-box до вышеуказанной строки.

Кроме того, вы можете попробовать использовать свойство line-height.

Answer 2

border и align являются устаревшими атрибутами, или, по крайней мере, они относятся к представлению, а не к содержимому, и поэтому должны выполняться в CSS, а не в коде HTML:

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

Также, alt является обязательным атрибутом элемента img. Может быть пустым (alt = "" для причудливых, но бессмысленных изображений) или значимым (если изображение передает информацию, которой еще нет в тексте)