HTML-якорь и кнопки ввода с одинаковым стилем CSS, но разные размеры

Итак, у меня есть базовый класс кнопок, который применяет один и тот же стиль к различным кнопкам на сайте.

Мне пришлось закончить ввод формы и привязку рядом друг с другом, а их высота и ширина разные. Я сделал текст внутренней кнопки одним и тем же на каждом из них, чтобы показать различия, как для подобных (очевидно, мне не нужны кнопки "Добавить" рядом друг с другом: P)

Я не хочу указывать ширину или высоту в CSS при изменении содержимого. Даже шрифт выглядит немного по-разному, и из модели коробки это похоже на заполнение в порядке.

http://jsfiddle.net/aeD4Z/2/

Разметка

<form id="" method="POST" action="">
<input class="button" type="submit" name="submit" value="Add">
</form>

<a class="button" href="">Add</a>

CSS

.button {
    font-family: Arial;
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent;
    border: 1px solid #F07605;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    outline: medium none;
    padding: 5px 8px !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

РЕДАКТИРОВАТЬ: Как вы можете видеть ниже, это не дополнение, так как модели ящиков в firebug показывают, что отступы одинаковы для каждого, поэтому его что-то делать с самим фактическим элементом

Как мне заставить оба быть одинаковыми измерениями из одного класса CSS в моей js скрипке выше?

Ответ 1

Чтобы полностью выровнять привязки "button-ish" <a>, input и совсем недавно button, это хорошая идея, чтобы синхронизировать их полевые значения:

input и button по историческим причинам все еще находятся в режиме quirks (соответственно уже в современном режиме box-sizing: border-box) rest находится в box-sizing: content-box mode (в любом случае: нужно поставить один и тот же режим или компенсировать равные высоты с помощью differenciating padding)

Это мой стандартный "тест", когда я начинаю стиль для сайта:

__AA__
<button id='button'>plain Button</button>
<a class='button' href='#'>plain Anchor</a>
<a class='button'>linkless Anchor</a>
<input class='button' type='submit' value='Input Button' />
__BB__

этот CSS (в stylus обозначение) является хорошим шаблоном:

button, a.button, input.button
    display inline-block
    font-size 12px
    font-weight bold

    color white
    font-family sans-serif
    text-decoration none
    background #24B345
    cursor pointer // also linkless (i.e. js) anchors/buttons should have that

    // important to equalize input/button vs. anchor:
    box-sizing content-box
    border 4px solid green
    padding 8px 10px
    margin 5px 4px 10px 0

    // some of this is default, 
    // but since input often gets styled elsewhere...
    vertical-align middle // a bit subject to taste 
    min-height 0 

    &:hover, &:focus // slight hover effect, resp. keyboard use (:focus)
         background: #44D365

Live on Codefork

Ответ 2

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

Вы можете попробовать следующее:

a {
   padding-top:5px !important;
   padding-bottom:5px !important;
   padding-left:0px !important;
   padding-right:0px !important;
}

Что не будет точно такого же размера, но довольно близко.