| Кроссбраузерность |
 |
 |
 |
| Статьи - Прочее |
Суть проблемыКаждый верстальщик, пишущий html-css под несколько браузеров, сталкивается с тем, что в браузере internet explorer что-то работает не так, как в других популярных браузерах(opera, mozilla firefox). Более того, часто бывает и такое, что ваш код неодинаково воспринимается версиями 6 и 7. Из-за этого приходится заново верстать некоторые элементы страницы или же отказываться от использования некоторых приемов.
Решение проблемыК счастью, можно написать отдельные стили, которые будут работать только в IE. Причем я предлагаю вариант как для шестой, так и для седьмой версий.
Момент истиныЕсли поставить перед свойством две наклонные черты( // ), оно будет восприниматься лишь браузером интернет эксплорер всех версий. Другие браузеры такое свойство проигнорируют.
Для седьмой версии используется хак
*:first-child+html ваш_элемент {...}
или
*+html ваш_элемент {...}
Для шестой версии существует возможность поставить минус(-) или нижнее подчеркивание(_) перед свойством, при этом седьмой ie не отреагирует на него. Можно также использовать конструкцию
* html ваш_элемент {...}
Примерdiv {
background: red; /* для нормальных браузеров */ //background: green; /* для всех ie */ -background: blue; /* для ie6 */ } * html div { background: blue; /* ещё один способ для ie6, кому как больше нравится :) */ } В этом случае фон блока будет красным в браузерах Opera и FF, зеленым в седьмой и синим — в шестой версии Internet Explorer.
МоральВ примере я менял цвет фона блока для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.
АльтернативаКроме вышеупомянутого способа существует ещё один способ, позволяющий подключить отдельный стилевой файл, не воспринимаемый определенной версией любимого браузера — условные комментарии.
Любопытно также, что таким способом можно скрывать HTML код от определенной или всех версий ie. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме ie6, если поместить её в if-ie следующим образом:
<![if !IE 6]>
<p>HTML-код</p> <![endif]> В довесокТак же, как и для любимого IE, существуют специальные хаки(трюки), позволяющие показывать стили только браузерам FireFox и Opera. Css хаки для FireFox:
html:root ваш_элемент {...} /* этот работает ещё и для Safari */
или
ваш_элемент, x:-moz-any-link {...}
Css хаки для Opera:
html:first-child ваш_элемент {...}
или
@media all and (min-width: 0) {
ваш_элемент {...} } Источник |
