Итак, у меня есть базовый класс кнопок, который применяет один и тот же стиль к различным кнопкам на сайте.
Мне пришлось закончить ввод формы и привязку рядом друг с другом, а их высота и ширина разные. Я сделал текст внутренней кнопки одним и тем же на каждом из них, чтобы показать различия, как для подобных (очевидно, мне не нужны кнопки "Добавить" рядом друг с другом: P)
Я не хочу указывать ширину или высоту в CSS при изменении содержимого. Даже шрифт выглядит немного по-разному, и из модели коробки это похоже на заполнение в порядке.
Разметка
<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 скрипке выше?