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

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

Особенности отображения форм в разных браузерах

Чтобы разобраться в особенностях вывода информации в каждом браузере, необходимо изучить одну и ту же форму в разных браузерах

Chrom

Firefox

Opera

Изучив детально вывод формы в каждом браузере, можно отметить следующие особенности отображения кода:

• некоторые браузеры устанавливают разные внутренние отступы (padding) по умолчанию, причем от этой проблемы нельзя избавиться с помощью универсального селектора;
• в теге textarea в разных браузерах устанавливается свой размер и тип шрифта (отлично это видно в сравнении Firefox и других браузеров);
• не одинаковое выравнивание шрифта по горизонтали (особенно это видно, когда рядом с полем установлен label).

Еще более заметны становятся различия при применении необычных стилей для оформления элементов форм.

Решение проблемы

Исходя из выявленных различий в отображениях формы, можно легко составить код, который приводит к одинаковому оформлению во всех браузерах. В первую очередь назначаем в принудительном порядке внутренние отступы через свойство padding. Также необходимо установить размер шрифта через font-size, а для поля textarea дополнительно уточнить и семейство шрифта через font-family.

CSS

input[type="text"], input[type="password"] {
    font-size: 100%;
    padding: 0;
}
textarea {
    font-size: 100%;
    padding: 0;
    font-family: arial;
}

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

CSS

.formText {
    font-size: 100%;
    padding: 0;
}
input {
    z-index: expression(
    runtimeStyle.zIndex = 1,
    type == "text" ? (className += " formText") : 0,
    type == "password" ? (className += " formText") : 0
)
}

Еще определенные проблемы могут возникнуть при определении фиксированного значения высоты текстового поля или верхнего внутреннего отступа. Чтобы не быть голословным, предлагаю рассмотреть практический пример. Создадим поле с высотой 30 пикселей, шириной — 250 пикселей, и установим верхний внутренний отступ, величиной 5 пикселей.

CSS

input {
	height: 30px;
	width: 250px;
	border: 1px solid #c9c9c9;
	background: #eee;
	font-size: 25px;
	padding:5px;
}

В итоге, что мы видим в разных браузерах: разная высота полей и разная ориентация текста по вертикальной оси, как показано на картинке

Ну с высотой тут все понятно, на ней останавливаться подробно не будем. Просто напомню, что IE понимает принципы блочной модели по своему и не учитывает внутренние отступы при определении высоты. А что касается выравнивания текста, то необходимо сделать следующее:

• зафиксировать высоту свойством height, с учетом внутренних отступов;
• жестко закрепить внутренние отступы с помощью свойства padding;
• установить четкое значение показателя высоты текста;
• присвоить значению высоты строки значение высоты поля (line-height = height).

CSS

input {
    height: 18px;
    width: 248px;
    border: 1px solid #c9c9c9;
    background: #eee;
    font-size: 25px;
    padding: 5 px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 18px;
}

В каких браузерах работает?