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-хак, который не валиден, что, естественно, не есть хорошо.
А если для Firefox’a завести свой отдельный .css и прописать в нём padding-top: -1px; ?
И как же образом, интересно, можно завести для него отдельный .css?
По ряду причин без хаков не получится.
Во-первых, FireFox жестко задает lin-height: normal !important для всех кнопок (это в resource://gre/res/forms.css)
Во-вторых, вертикальное выравнивание будет задавать только позицию самой кнопки относительно инлайнового текста вокруг нее.
Есть такое решение: http://stackoverflow.com/questions/1679952/input-typesubmit-text-vertical-alignment-in-firefox
Но оно конфликтует с IE8. Так что без хаков здесь никак.
Либо использовать input type=”image” с alt-текстом, если это приемлемо.
А если попробовать указывать необходимый padding для кнопки сверху и снизу? (правда придется отказаться от указания высоты - с одновременным указанием высоты и отступов все браузеры начинают чудить)
Для всех блоковых элементов я использую такую доморощенную конструкцию -
#button { border:solid 1px #bbb; background:#888; padding:5px 10px 5px 10px; margin:10px 0px 10px 0px;}
#button:hover { border:solid 1px #bbb; background: #fff; padding:5px 10px 5px 10px; margin:10px 0px 10px 0px;}
Проблем с кроссбраузерностью не возникало, но кнопки смотрятся несколько не по-кнопочному.
Чаще встречается именно такой вариант, как на скриншоте.
Я не понимаю, неужели никто из веб-разработчиков не писал баг-репорт по этому поводу? Ведь это со 2-й версии FF (если еще не раньше) тянется.
Для ФФ все равно придется другой паддинг писать, все из-за того же пикселя. Пробовал я разные варианты, самым оптимальным пока остается указание высоты + паддинг для FF через хак.
Добавляю padding-bottom: Xpx
А если так:
или
(предполагая, что у формы задан класс или ID)
Попробуйте вместо padding:5px 10px 5px 10px сделать padding:2px 10px 2px 10px и увидите, что не кроссбраузерно. Так что это не выход.
И чем он лучше от хака, которым пользуюсь я?
2
3
.style {}
}
Валидностью :-)
Вряд ли. Этот валидатор - http://jigsaw.w3.org/css-validator/#validate_by_input - говорит об обратном.
Странно. Мне говорит, что все ОК: https://url.odesk.com/7ngef Valid CSS 3.
Да, Дима, это проблема FF достала :)
Писал об этом у себя: “В стремлении к идеалу…”
Но без хака для FF, решения так и не нашел :(
Там по умолчанию проверяется как CSS 2.1, если выбрать 3, то всё хорошо.
А, ясно, ты проверял на CSS3, а я - по умолчанию (CSS2.1). Значит можно юзать этот хак. Спасибо, Владимир!
Меня удивляет, почему никто не пишет об этом баге в Мозиллу, либо пишут, но она ничего не предпринимает.
P.S. Кстати, Сергей, нужно было оповестить подписчиков твоего блога, что у тебя сменился адрес RSS. Я вот только недавно узнал, когда задумался о том, что ты давно ничего не писал, а оказалось, что писал. А мужики-то не знают.
Да, видимо писать безполезно :(
Сколько багов у OPERA, о чем тоже писал не однократно, а воз и ныне там :)
Есть такое :)
Но на хосте нет PHP5 и RSS лента вроде, как не работает :(
Ну если ты только на блоге писал, то это вряд ли что-то изменит. Или ты писал в соответствующие инстанции?
Действительно, а я и не заметил.
Товарищ, поделись инфой, где ты такой смайл UTF’ный надыбал? =)
Знаю многих, кто пишет разработчикам, но ни разу никто не ответил и мер не принял :(
Стоит, только соответствующие форумы почитать :)
Потому что в дефолтной кнопке без линейки это баг не заметен и не критичен. Я сверстал не меньше сотни макетов пока не узнал об этом дефекте и потом еще. Это совсем не критично, что в прочем не отменяет того факта, что исправить девелоперам FF не помешало бы.
Просто открыл стандартную таблицу символов, выбрал шрифт, где всего интересного побольше, стал смотреть, что есть, и нашёл символ 30C4 - Katakana Letter Tu, типа в японском такая буква хорошая есть.
Нашел его тоже. Спасибо! Прикольные смайлы シ
Очевидно на сервере, по заголовку User-Agent.
При генерировании страницы, дополнять отдельным CSS или при генерировании самого CSS.
..bw
Столкнулся с данной проблемой пару лет назад. Написа вначале на форум мозиловский - там ткнули в решение с хаком (неважно каким, важен факт), затем три раза баг-репорт писал, даже ответа не дождался. Обидно. А проблема ведь действительно есть.
В общем не знаю, может быть я тут капитан очевидность и поскольку других вариантов нету, то все используют тот же метод что и я но я использую дополнительный элемент с текстом (к примеру спан) и кладу его поверх кнопки. :-[
Мда… похоже, что они преследуют только свои меркантильные интересы.
Тоже использую нижний отступ в 1-2px.
С каких пор padding отрицательный работает, расскажите пожалуйста?
Кстати есть еще следующая конструкция
. Убирает внутренние отступы в ff.
Спасибо. В следущий раз попробую воспользоваться.
Вполне подходящий прием
form .submit, x:-moz-any-link, x:default {padding: 0 0 2px 0;} Увеличеваеи или уменшаем padding-bottom для кросбраузерности
Попытался уже несколько раз использовать этот хак, но никаких изменений не происходит.
Решение красивое, буду теперь использовать его. Только жаль, что не валидное. Кстати, достаточно и такого варианта: