В среде верстальщиков принято ругать и обсуждать особенности работы продукта от компании Microsoft — Internet Explorer. Однако свои тараканы есть и у других браузеров:) Пробежимся по некоторым из них в Mozilla Firefox.

Отступ внутри кнопки

Это, наверное, самая известная особенность FF при верстке — сдвигать текст внутри кнопки на 1px ниже других.

Решение состоит в использовании специальных псевдоклассов мозиллы:

input::-moz-focus-inner { border: 0; padding: 0; }

Текст в 2 строки внутри кнопки

Представим ситуацию — Ваш сильно креативный дизайнер нарисовал кнопки, в которых текст переносится на 2 строки. Первое что следует сделать — заменить тег <input> на <button>, который поддерживает переносы строк с помощью <br />. В большинстве браузеров проблемы исчезают, но FF категорически отказывается делать межстрочный интервал меньше значения ‘normal’. Это происходит из-за предустановленного в /program dir/mozilla/res/forms.css стиля:

button, 
input[type="reset"],
input[type="button"],
input[type="submit"] { 
...
  line-height: normal !important;
...
}

Это правило невозможно перебить даже inline-стилем! Решение как всегда простое — использовать конструкцию:

<button><span>1 строка<br />2 строка</span></button>

И для <span> установить нужный межстрочный интервал. Решение справедливо для doctype Transitional

Абсолютное позиционирование и визуальный редактор Битрикс

При изменении абсолютно позиционированного текста в визуальном редакторе, Firefox выделяет область редактирования фоном. Фон этот зависит от текущего фона под текстом и цвета текста. Иногда получаются плохочитаемые сочетания. Например:

Для таких областей есть возможность установить цвет шрифта и исправить ситуацию так:

[_moz_abspos] { color: #000000 !important; }

На этом все, удачного Вам сотрудничества с браузерами:)

Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!

Подписаться в telegram

3 комментария “CSS фичи FF и как с ними бороться

  1. Kola

    Здорово, про глюк/фичу button’а в фф не знал, просто не сталкивался. Про глюк редактора тоже не знал, но это меня не сильно не волнует :D). Надо кому-то переделать визуальный редактор так, чтобы он работал по-живому прямо на страничке (в пределах редактируемой области, конечно) с целью не коверкать дизайнерские стили, и чтобы имел подсветку тегов и автоматический, продуманный сборщик мусора, чтобы грязи поменьше делал.

  2. unclechu

    Полезно! Спасибо! Формы в FF действительно проблема. Не только в нём конечно. Формы — это вообще по-моему одно из самых страшных и непредсказуемых мест между браузерами.

  3. orenkomp.ru

    Проприетарные фичи, не прошедшие процедуры стандартизации, обычно страдают конструктивными дефектами, даже когда идея в целом хорошая.

Добавить комментарий

Ваш адрес email не будет опубликован.