Только что, после очередной корректировки сайта заказчика, заметил, что после того, как в хедере разместил код джава скрипта для отслеживания данных по клиенту, пришедшему на лендинг, на самом сайте вверху страницы появилась белая полоса пикселов 20. Снова заглянул в код лендинга — ничего лишнего, все нормально.
Когда кликнул по этой полоске и вызвал просмотр кода элемента, увидел, что в коде добавлены два тега переноса сразу после открывающего тега. Интересно, что в исходном коде страницы в браузере этих тегов нет.
Первое, что пришло на ум, прописать отрицательный margin-top для страницы или для верхнего блока. Однако, прежде чем это сделать, посмотрел, как отображается лендинг в Гугл Хроме. Оказалось, что в хроме этого отступа нет.
Получается, что Мозилла по какому-то ее личному алгоритму высчитала, что вверху данного лендинга должна быть белая полоса (вернее, отступ). Значит, и корректировать этот отступ нужно только для Мозиллы.
Как это сделать? Оказалось, совсем просто.
К счастью, разработчики Мозиллы предусмотрели такую возможность — заложили в этот браузер правило, согласно которому Фаерфокс может распознавать стили, предназначенные только для него.
Вот такой простой фильтр — @-moz-document — позволяет добавлять в стили сайта персональные стили для Мозиллы Фаерфокс.
На практике у меня получилось вот так:
<style type="text/css">
@-moz-document url-prefix()
{
#wrapper { margin-top: -20px; }
}
</style>
Этим проблема была решена.
Это частный случай применения персональных стилей для браузера Мозилла Фаерфокс.
Что касается валидности данного кода. Скажу так. Главное, что цель была достигнута. Можно, конечно, ходить сложными путями, стараясь угодить валидаторам и прочим стандартизаторам. Однако, если есть такой короткий путь, почему бы им не воспользоваться.