Главная›CSS-верстка

FireFox и вертикальное выравнивание текста в input[submit]

67 комментариев

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

При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии браузера FireFox, в которой смотрится страница, вертикальное выравнивание текста в кнопке, созданной с помощью тега <input type="submit" />, отличается от всех других популярных браузеров на 1-2 пикселя (в зависимости от высоты кнопки и размера шрифта).

Для сравнения проведем элементарный тест:

  1. Создаем страницу с единственным элементом содержимого — HTML-кнопкой:

    <html>
<body>
	<input type="submit" value="Submit" class="submit" />
</body>
</html>

  2. Для кроссбраузерности оформляем эту кнопку с помощью CSS следующим образом:

    input.submit {
	width: 80px;
	height: 25px;
	border: 1px solid #BBB;
	border-top-color: #DDD;
	border-left-color: #DDD;
	background: #EEE;
	font: 12px Arial, Tahoma, sans-serif;
}

  3. Делаем скриншоты этой кнопки в браузерах: Opera, FireFox, Internet Explorer, Safari, Chrome,