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

В среде верстальщиков принято ругать и обсуждать особенности работы продукта от компании 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>
Абсолютное позиционирование и визуальный редактор Битрикс
При изменении абсолютно позиционированного текста в визуальном редакторе, Firefox выделяет область редактирования фоном. Фон этот зависит от текущего фона под текстом и цвета текста. Иногда получаются плохочитаемые сочетания. Например:
[_moz_abspos] { color: #000000 !important; }
Алексей Валеев