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

Question

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

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

Таблица стилей агента пользователя Google Chrome имеет это:

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

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

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

19

css forms google-chrome webkit

задан David 15 April 2010 в 00:37

3 ответа

Другие вопросы по тегам:

css forms google-chrome webkit

Похожие вопросы:

score 0 · Answer 1

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

0

ответ дан 30 November 2019 в 05:21

score 3 · Answer 2

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

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

У меня есть статья об использовании встроенного блока и вертикального выравнивания, которая может помочь некоторым .. (используйте verital-align: baseline;) The Joys of Inline Block на Screwlewse.com

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

score 1 · Answer 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.