наверх





При верстке шаблона возникают, очень часто, трудности при подгонке определенных параметров под разные браузеры. Давай найдем подходящие варианты для их решения.

Для того, чтобы избавиться от проблемы с разными браузерами, в этой статье представлены подборка специальных CSS хаков. Каждый хак предназначен для каждого браузера отдельно и не будет работать в других.

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

xxx:*, tag { 
    список свойств;
}


Например, в браузере IE съезжает какой-то блок, из-за того задан слишком большой отступ. В других браузерах нормально, используем:

.wrapper { 
    padding: 5px 0 1px 6px;
}

xxx:*, .wrapper { 
    padding: 3px 0 1px 4px;
}


Так же, имеется свои префиксы и для браузера Opera. Правда, они работают лишь с версии 9.50.

noindex:-o-prefocus, #layout { 
    margin: 0 auto;
}


Для браузера Firefox есть даже целых 2 полноценных CSS хака, рассмотрим их:

noindex:-moz-anylink, #layout { 
    width: 399px;
}


Приведенный выше хак похож на пример с браузером Opera. А вот второй пример он более удобен:

@-moz-document url-prefix() {
        .foo { 
          position: relative;
       }

        .foo-main { 
          margin: 0 auto;
          width: 503px;
       }
}


То есть, как видите, все изменения, которые должны коснуться браузера Firefox можно описать внутри блока.

И следующей пример хака для браузеров Safari так же похож на второй вариант хака для Firefox:

@media screen and (-webkit-min-device-pixel-ratio:0){
          .wrap-main {
               width: 422px;
               margin: 0 1px 5px 3px;
          }
}




Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.