Как я могу добавить отступы к?

Question

Прошло пару месяцев с тех пор, как я серьезно занялся кодированием HTML / CSS, поэтому я, вероятно, пропустил много вещей, но сегодня я наткнулся на действительно странную вещь.

Когда я пытаюсьприменить padding к <input type="submit">, это больше не работает.Я примерно на 99% уверен, что смог это сделать, но теперь мне кажется, что это невозможно.

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

Вот небольшая демонстрация проблемы

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

и как это выглядит в Google Chrome 15 на Mac

но в Firefox 4 он вообще не работает

Вот ссылка на демонстрационный источник на JSbin.com

Могу поспорить, что это сработало около 6 месяцев назад, но что-то должно было измениться.Я использовал Windows Vista и OS X Snow Leopard с недавним обновлением до Lion, но это не похоже на это.

Я что-то упустил?

edit: fixingопечатка не помогла.Заполнение по-прежнему не применяется к первой кнопке.

edit2: после прохождения Adobe Browserlab похоже, что это специфическая проблема OS X.Я все еще хотел бы знать, как сделать это даже на OS X, хотя.

Answer 1

Эта проблема была очевидна для меня и в OS X Firefox. Решение состоит в том, чтобы отключить внешний вид браузера по умолчанию перед применением собственного:

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Дополнительная информация по адресу: http://css -tricks.com / almanac / properties / a / внешность /

Answer 2

<input type="submit" value="Submit" style="padding: 5x 10px;">

Вы забыли p в 5px. Это нарушает стиль.

Answer 3

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

input[type="submit"], input[type="reset"] {
    background: none repeat scroll 0 0 #8C8C69;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    padding: 7px;
    text-transform: uppercase;
}

Answer 4

Вы должны использовать box-sizing свойство:

input[type="submit"] {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}