Для элемента <select>
и <input>
, оба из которых определены как 200px:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px" type="text">
</body>
<html>
Один заканчивается шире 1,2,3, 4 чем другой:
В чем причина этого?
Если кто-то может объяснить причину, возможно, решение было бы очевидно, а не взлом и молитва.
Layout
Приложенная компоновка вполне разумна:
Обновление 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>
Не решает проблему:
Кроме того, меня меньше интересует решение, чем объяснение.
Сноски
- 1,2,3 Chrome
1719, Firefox, Internet Explorer 9 - 4 в Windows 7 64-разрядный
Чтение бонусов
- Как сделать <option> шире, чем <select> в IE6? (я не хочу, чтобы опция была шире, чем выбор, я не использую IE6)
- Как показать расширенную опцию в списке выбора? (ширина выпадающего списка соответствует ширине элемента управления)
- Элемент ввода HTML шире, чем Содержащий Div (здесь нет
<div>
) - Как выстроить элементы ввода HTML?