Все записи →

Хак для Mozilla FireFox

28 января 2015

Столкнулся с некорректной версткой у одного заказчика, состоящей в том что строка
поиска "наезжала" на модуль корзины, причем проявлялось это только в браузере FireFox.
Во всех других все было нормально.
Нашел решение с помощью этого хака @-moz-document url-prefix ()

 .input-group{
 position:relative;
 display:table;
 border-collapse: separate
 }
 @-moz-document url-prefix(http://sait.ru/){
 .input-group{
 position:relative;
 display:table;
 border-collapse:separate;
 margin-top:100px}
 }

На названия классов и свойства не обращаем внимание - главное тут то, что класс input-group
полностью копируется ниже, и в него добавляется дополнительное св-во margin-top ,
которое сдвигает вниз на 100px класс "input-group"(в данном случае класс строки поиска)
и это св-во будет применятся только тогда, когда на sait.ru зайдут через браузер Mozilla. Важно написать после url-prefix в скобках название ресурса и обратить внимание на две скобки
{.input-group{*****************}}

P.S

@-moz-document url— задает url страницы, к которой применяются стили

@-moz-document url-prefix — задает url, с которого начинаются все страницы, к которым применяются стили

@-moz-document domain — задает адрес домена, ко всем страницам которого применяются стили

В моем случае я выбрал "все страницы" sait.ru

Теги: CSS