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

В среде верстальщиков принято ругать и обсуждать особенности работы продукта от компании 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; }

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