FireFox и вертикальное выравнивание текста в input[submit]
Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост - это вопрос к читателям.
При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии браузера FireFox, в которой смотрится страница, вертикальное выравнивание текста в кнопке, созданной с помощью тега <input type=”submit” />, отличается от всех других популярных браузеров на 1-2 пикселя (в зависимости от высоты кнопки и размера шрифта).
Для сравнения проведем элементарный тест:
-
Создаем страницу с единственным элементом содержимого - HTML-кнопкой:
1
2
3
4
5<html>
<body>
<input type="submit" value="Submit" class="submit" />
</body>
</html> -
Для кроссбраузерности оформляем эту кнопку с помощью CSS следующим образом:
1
2
3
4
5
6
7
8
9input.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;
} -
Делаем скриншоты этой кнопки в браузерах: Opera, FireFox, Internet Explorer, Safari, Chrome, и для наглядности в фотошопе рисуем специальные линии (кликните на изображение для просмотра его с увеличенным масштабом):
![FireFox и вертикальное выравнивание текста в input[submit]](http://dimox.name/wp-content/uploads/2009/11/input-submit-screenshot.png "FireFox и вертикальное выравнивание текста в input[submit]")
![FireFox и вертикальное выравнивание текста в input[submit]](http://dimox.name/wp-content/uploads/2009/11/input-submit-screenshot-zoom.png "FireFox и вертикальное выравнивание текста в input[submit]")
Как видим, текст кнопки в FireFox’e на 1 пиксель ниже по сравнению со всеми остальными браузерами.
Применение свойств vertical-align: middle или line-height, равный высоте кнопки, проблему не решают.
Так вот, господа веб-мастера, хотелось бы узнать - если вы сталкивались с подобной ситуаций, то каким образом вы устраняете эту недоделку FireFox?
Мне пока что приходится использовать для него CSS-хак, который не валиден, что, естественно, не есть хорошо.
input[type=’submit’]::-moz-focus-inner{padding:0;border:0}
добавить в строках где обнуляете цсс, и можно забыть сразу о баге
Alex уже 3 раза ответили подобным способом, Вы не читали предыдущие комменты?
Решил проблему использованием
Как-то так.