Поля ввода отображаются в разных браузерах очень по-разному - PullRequest
2 голосов
/ 19 марта 2011

Хорошо, я нахожусь в процессе разработки веб-сайта, который имеет форму входа в правом верхнем углу веб-страницы. Я установил атрибут размера его полей ввода и получил интересные результаты. Ниже приведена группа скриншотов, которые я скинул вместе. Я даже сложил их для всех вас. Я даже добавляю jsFiddle для всех вас. Итак, четыре вещи:

  • Я выровнял их по нижнему правому углу поля ввода пароля в сложенном изображении. Не спрашивай почему.
  • Я проектирую с границами на всем, пока макет не будет правильным, затем я удаляю их и добавляю цвета и изображения и еще много чего.
  • Скриншот IE 9 основан на BrowserLab Adobe, так как я работаю на Mac.
  • Обратите внимание, что браузеры на базе WebKit (Safari и Chrome) отображают одинаковый размер.

Я не смог найти ничего, что могло бы раскрыть, что происходит после серии поисков. Может быть, это потому, что трудно сформулировать такой вопрос в простых поисковых терминах (или, по крайней мере, для меня) ...

С учетом всего вышесказанного мой вопрос заключается в том, почему поля ввода отображаются так по-разному, и, что наиболее важно, как можно исправить (без JavaScript или, предпочтительно, зависимости от пользовательских агентов)?

Screenshots

1 Ответ

3 голосов
/ 19 марта 2011

Атрибут size устанавливает количество символов , которое будет отображаться в поле (в случае полей text и password). В разных браузерах используются разные шрифты по умолчанию, размеры шрифтов и меры ppi, а это означает, что вы получаете поля разного размера (в пикселях).

Кроме того, как сказано в спецификации, это всего лишь «начальная» ширина элемента управления, и браузер может свободно изменять размер элемента управления, если он решит, что это необходимо в ходе переформатирования всей страницы.

Чтобы даже надеяться, что это поле будет иметь одинаковый размер (в пикселях) в разных браузерах, вам придется стилизовать его с помощью CSS. При этом, вероятно, есть веская причина, по которой каждый из них имеет разные размеры - в основном это связано со шрифтами по умолчанию - и если вы ограничиваете размер поля по пикселям, это означает, что некоторые браузеры будут отображать больше фактического текста, чем другие.

...