![FireFox и вертикальное выравнивание текста в input[submit]](https://dimox.name/wp-content/themes/dimox.name/cache/ed/2cec112e5b43aed_150x100.png)
Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост - это вопрос к читателям. При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии ...
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью ...
Как вы уже могли заметить, страницы моего блога некоторое время назад стали «резиновыми». Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью ...
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику. И я с удивлением обнаружил, что ...
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются. Не знаю, почему ...
Комментарии (67)
А если для Firefox’a завести свой отдельный .css и прописать в нём padding-top: -1px;?
И как же образом, интересно, можно завести для него отдельный .css?
Очевидно на сервере, по заголовку User-Agent.
При генерировании страницы, дополнять отдельным CSS или при генерировании самого CSS.
.bw
С каких пор padding отрицательный работает, расскажите пожалуйста?
По ряду причин без хаков не получится.
Во-первых, FireFox жестко задает lin-height: normal! important для всех кнопок (это в resource://gre/res/forms.css)
Во-вторых, вертикальное выравнивание будет задавать только позицию самой кнопки относительно инлайнового текста вокруг нее.
Есть такое решение: stackoverflow.com/questions/1 679 952/input-typesubmit-text-vertical-alignment-in-firefox,
Но оно конфликтует с IE8. Так что без хаков здесь никак.
Либо использовать input type="image" с alt-текстом, если это приемлемо.
Чаще встречается именно такой вариант, как на скриншоте.
Я не понимаю, неужели никто из веб-разработчиков не писал баг-репорт по этому поводу? Ведь это со 2-й версии FF (если еще не раньше) тянется.
А если попробовать указывать необходимый padding для кнопки сверху и снизу? (правда придется отказаться от указания высоты — с одновременным указанием высоты и отступов все браузеры начинают чудить)
Для ФФ все равно придется другой паддинг писать, все из-за того же пикселя. Пробовал я разные варианты, самым оптимальным пока остается указание высоты + паддинг для FF через хак.
Для всех блоковых элементов я использую такую доморощенную конструкцию —
#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;}
Проблем с кроссбраузерностью не возникало, но кнопки смотрятся несколько не по-кнопочному.
Попробуйте вместо
padding:5px 10px 5px 10pxсделатьpadding:2px 10px 2px 10pxи увидите, что не кроссбраузерно. Так что это не выход.Добавляю padding-bottom: Xpx
Тоже использую нижний отступ в 1−2px.
А если так:
или
(предполагая, что у формы задан класс или ID)
И чем он лучше от хака, которым пользуюсь я?
Валидностью :-)
Вряд ли. Этот валидатор — jigsaw.w3.org/css-validator/#validate_by_input — говорит об обратном.
Странно. Мне говорит, что все ОК: url.odesk.com/7ngef Valid CSS 3.
А, ясно, ты проверял на CSS3, а я — по умолчанию (CSS2.1). Значит можно юзать этот хак. Спасибо, Владимир!
Там по умолчанию проверяется как CSS 2.1, если выбрать 3, то всё хорошо.
Товарищ, поделись инфой, где ты такой смайл UTF’ный надыбал? =)
Просто открыл стандартную таблицу символов, выбрал шрифт, где всего интересного побольше, стал смотреть, что есть, и нашёл символ 30C4 — Katakana Letter Tu, типа в японском такая буква хорошая есть.
Нашел его тоже. Спасибо! Прикольные смайлы シ
Попытался уже несколько раз использовать этот хак, но никаких изменений не происходит.
Меня удивляет, почему никто не пишет об этом баге в Мозиллу, либо пишут, но она ничего не предпринимает.
Потому что в дефолтной кнопке без линейки это баг не заметен и не критичен. Я сверстал не меньше сотни макетов пока не узнал об этом дефекте и потом еще. Это совсем не критично, что в прочем не отменяет того факта, что исправить девелоперам FF не помешало бы.
Да, видимо писать безполезно :(
Сколько багов у OPERA, о чем тоже писал не однократно, а воз и ныне там :)
Есть такое :)
Но на хосте нет PHP5 и RSS лента вроде, как не работает :(
Ну если ты только на блоге писал, то это вряд ли что-то изменит. Или ты писал в соответствующие инстанции?
Действительно, а я и не заметил.
Знаю многих, кто пишет разработчикам, но ни разу никто не ответил и мер не принял :(
Стоит, только соответствующие форумы почитать :)
Столкнулся с данной проблемой пару лет назад. Написа вначале на форум мозиловский — там ткнули в решение с хаком (неважно каким, важен факт), затем три раза баг-репорт писал, даже ответа не дождался. Обидно. А проблема ведь действительно есть.
Мда… похоже, что они преследуют только свои меркантильные интересы.
В общем не знаю, может быть я тут капитан очевидность и поскольку других вариантов нету, то все используют тот же метод что и я, но я использую дополнительный элемент с текстом (к примеру спан) и кладу его поверх кнопки. :-[
Кстати есть еще следующая конструкция
element:-moz-focus-inner{padding:0;border:0}. Убирает внутренние отступы в ff.
Спасибо. В следущий раз попробую воспользоваться.
Вполне подходящий прием
Решение красивое, буду теперь использовать его. Только жаль, что не валидное. Кстати, достаточно и такого варианта:
form. submit, x:-moz-any-link, x: default {padding: 0 0 2px 0;} Увеличеваеи или уменшаем padding-bottom для кросбраузерности
господа вы мои хорошие!
Не морочьте яиченьки!
Просто поставьте проверку javascriptoм на наличиё лисички и пригрузите килобайтный файл с коррективами.
Ведь людей у которых лиса всегда включён джаваскприпт, потому что это аксиомина, если хотите ;)
Некрасивый способ.
Далеко не всегда.
Я использую «глобальный сброс»
vremenno.net/html-css/css-global-reload/
И что помогает? Чушь! Если б всё так просто было, то и поста не было.
Fx такой Fx, да. На самом деле, этот баг не критичный, ничего страшного, никто не заметит даже.
В том-то и дело, что бросается в глаза.
Да, с ним тоже это наблюдается.
Не такая уж и большая проблема, я бы никогда не заметил этого бага, а большинство пользователей и подавно
Мелочами страдаете
Не было бы проблемой, если бы заказчики не указывали на нее.
Тут не поспоришь, клиент всегда прав!
Могу ошибаться, но мне кажется это решается
outline:none;К сожалению, но нет. Можете сами попробовать.
в FF 3.6.3 решил проблему только так
input:-moz-focus-inner { border: 0; padding: 0; }СМ. второй комментарий сверху от Alex.