CSS: кнопка «Отправить» выглядит меньше, чем текстовый ввод и текстовое поле

Question

Я только что заметил этот странный рендеринг очень простой формы.

Вот моя разметка / CSS: http://jsfiddle.net/a9PLM/

Как видите, текстовые поля и кнопка имеют одинаковые стилино их размер совсем другой.

Почему это происходит?

Спасибо!

Answer 1

Это связано с тем, что используемая блочная модель отличается для <input type="submit"> и <input type="text"> / <textarea>.Вы можете сделать блочные модели одинаковыми, указав их с помощью CSS:

box-sizing: border-box;
-moz-box-sizing: border-box;

Подробнее о блочных моделях можно прочитать здесь: http://www.quirksmode.org/css/box.html

Я отредактировал ваш jsFiddle, чтобы он работал: jsFiddle demo

Answer 2

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

Чтобы исправить, добавьте это к вашему CSS

form input[type="submit"]{
    width:273px;
}

Пример: http://jsfiddle.net/jasongennaro/a9PLM/1/

Answer 3

Я использовал это решение только для CSS, которое работает в IE, FF и Chrome.По сути, идея состоит в том, чтобы вручную принудительно устанавливать высоту элементов ввода в значения, превышающие стандартные поля.Сделайте это и для текста, и для кнопки:

• Установите поля и отступы на 0.
• Установите вертикальное выравнивание по середине.
• Используйте высоту / ширину для управления текстоми размеры кнопок.Высота текста должна быть на несколько пикселей больше высоты шрифта (чтобы переопределить стандартные размеры блока).Высота кнопки должна быть на 2 пикселя больше, чем у текста.

Пример:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }

Answer 4

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

    form textarea, form input[type=text]
    {
        width:250px;
        padding:10px;
    }
    form input[type=submit] { width: 270px }

Обратите внимание, что я добавил 20 пикселей (10 x 2) к ширине, чтобы компенсировать заполнение.

Answer 5

Заполнение текстовых полей дает дополнительное пространство по бокам. Установите отступы ввода и текстовых полей на 0.