Почему <INPUT> шире, чем я сказал?

Для элемента <select> и <input>, оба из которых определены как 200px:

<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input  style="width: 200px" type="text">
</body>
<html>

Один заканчивается шире 1,2,3, 4 чем другой:

enter image description here

В чем причина этого?

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

Layout

Приложенная компоновка вполне разумна:

enter image description here

Обновление 1. Пока я писал этот вопрос Chrome обновил себя от 17 до 19.

Обновление 2: Изменение отступов в <input> от 1 до ноль:

<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>

не делает ширину <input> 200px (т.е. не исправляет ее).

Обновление 3: Применение CSS reset:

<!doctype html>
<head>
<style type="text/css">
   * {
       padding: 0;
       margin: 0;
   }
</style>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>

Не решает проблему:

enter image description here

Кроме того, меня меньше интересует решение, чем объяснение.

Сноски

  • 1,2,3 Chrome 17 19, Firefox, Internet Explorer 9
  • 4 в Windows 7 64-разрядный

Чтение бонусов

Ответы

Ответ 1

Ваш <input> не слишком широк; ваш <select> слишком узкий!

Реальная проблема заключается в том, что элемент <select> не работает, как это делает большинство элементов. Он использует

box-sizing: border-box;

где width - ширина элемента после, а границы применяются; ведя себя так, как если бы они были в режиме "quirks".

Это работает с любым другим элементом html режима стандартов, который использует:

box-sizing: content-box;

Чтобы исправить это, измените <select> на использование той же модели окна, что и остальная часть html:

select { box-sizing: content-box; }

ИЛИ измените <input> на использование той же модели окна, что и выбор:

input { box-sizing: border-box; }

Элемент ввода ведет себя как и большинство элементов, используя модель content-box, где width - это ширина элемента перед заполнением и границ.

В вашем браузере установлены дополнения и границы по умолчанию, поэтому он больше, чем вы могли бы ожидать и/или ожидать. Я всегда использую "CSS reset" в верхней части моих таблиц стилей, например:

* {
    padding: 0;
    margin: 0;
}

Это обеспечит отсутствие по умолчанию заполнения или полей для любого элемента.

Элемент select - это другой случай, но он больше похож на элемент с включенным box-sizing: border-box, где он учитывает границы и дополнение в своей спецификации width.

Если вы добавите box-sizing: border-box в свой элемент input, он будет вести себя точно так, как вы ожидаете/хотите.

РЕДАКТИРОВАТЬ: Выделите часть, которая может иметь отношение к вам. Альтернативное решение уменьшает указанный width входной элемент на несколько пикселей, так что он соответствует ширине поля выбора.

Скрипка, демонстрирующая оба решения: http://jsfiddle.net/n4yT2/2/

Ответ 2

Так как браузеры делают вещи с размерами полей ввода (добавление границ по умолчанию, заполнение, изменение размера ящика и т.д.), чтобы сопоставить их с их собственными эквивалентами управления GUI (или операционной системой).

Решение о взломе и молитве, однако, является очевидным, к сожалению.

Ответ 3

Кажется, что элементы <select> ведут себя так, как будто они имели box-sizing: border-box. Попытка изменить его на box-sizing: content-box не работает, хотя (по крайней мере, в Chrome 19, OSX 10.7.4).

После того, как вы применили CSS reset, разница в размере остается за границами в поле ввода. Если вы их удалите, оба элемента будут иметь ширину в 200 пикселей. См. демо.