Почему ширина на входных элементах отличается

Question

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

Здесь 100px задайте ширину для кнопки отправки
Здесь же 100px установлено в текстовое поле

И вы можете проверить разницу ширины.Кажется, вы следите за режимом причуд, НО ПОЧЕМУ, когда установлен тот же тип документа?

Это ошибка в FX / Chrome?

Answer 1

, добавив box-sizing:border-box к вводимому тексту, решит это.

потому что по умолчанию рассчитывают ширину и высоту без включенной границы, добавив box-sizing:border-box Сумма свойств ширины и высоты включает отступы и границу, но не поле будет 100px

http://jsfiddle.net/wizztjh/gn3Cw/6/

дополнительная информация о размер коробки

Answer 2

это из-за размера границы попробуйте это,

http://jsfiddle.net/gn3Cw/2/

http://jsfiddle.net/gn3Cw/3/

Answer 3

Текстовые поля имеют встроенные границы.Посмотрите, что происходит при удалении границ: Fiddle here