Как я могу выравнивать высоты полей ввода текста?

Каков наилучший способ выравнивания высоты моих элементов <select..> и элементов <input type="text"..>? Это сложно доказать из-за различий в моделях размеров коробки.

Таблица стилей пользовательского агента Google Chrome имеет следующее:

select { -webkit-box-sizing: border-box; }

.. тогда как другие поля ввода текста используют модель окна содержимого. Почему разница? Должен ли я, возможно, использовать все поля ввода, основанные на тексте, с помощью модели рамки?

Кстати, я использую стандарт-совместимый режим (используя <!DOCTYPE html>).

Ответ 1

Да, это очень сложно. Не забывайте, что есть проблемы с обработкой элементов формы firefox по-разному. кросс-браузерная манипуляция в лучшем случае невозможна.: D

Некоторые примечания. line-height нельзя использовать для всех элементов. firefox жестко кодирует высоту строки для ввода элементов [type = text].

У меня есть статья об использовании встроенного блочного и вертикального выравнивания, что может помочь некоторым.. (используйте verital-align: baseline;) Радости встроенного блока на screwlewse.com

Также имейте в виду, что многие новые браузеры имеют этот добавленный хром, чтобы входы форм выглядели больше как ОС. (но это похоже на другую проблему)

Ответ 2

Как насчет?

select {padding: 1px;}

Ответ 3

Не могли бы вы просто указать высоту всех полей ввода и выбора на определенную высоту пикселя с помощью CSS? Если он не "смотрит" на ту же высоту из-за границ, удаляйте границы или равномерно распределите их одинаково. Например:

<html>
  <body>
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp;
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp;
    <input type=button style="border: 1px solid black; height: 37px;">
  </body>
</html>

Это делает все три поля формы высотой 37 пикселей. Работает на IE и Chrome, но я не тестировал его в другом месте.

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

Ответ 4

Да, вы должны использовать make, чтобы все "текстовые поля ввода использовали модель пограничного поля".

Это уже ответили на несколько других вопросов SO, например здесь.

Тот факт, что WhatWG/W3c принял текущую модель пограничного поля, является довольно странным.
То, что они не сделали это последовательно, еще более странно.

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

Ответ 5

Может быть, я вышел из базы, но вы пробовали использовать значения высоты строки?