Проблемы с кроссбраузерностью и CSS для IE.

Многие сталкиваются с такой проблемой как не каретное отображение Web - страницы в различных браузерах в этой теме постараемся разобраться почему так может быть и как с этим бороться.


Когда CSS используется не только для оформления текста, но и для работы со слоями при без табличной верстке, нужно помнить, что современные браузеры не одинаково трактуют такие важные параметры как margin — внешний отступ элемента, padding — внутренний отступ элемента, а также параметры position — положение,float — обтекание текстом и ряд других. И это приводит к тому что сайты и веб-интерфейсы, которые нормально смотрятся в браузерах Mozilla Firefox, Opera и Safari, вдруг начинают разъезжаться в браузере Internet Explorer.
В основе этих различий браузерами CSS лежит неполное соотвествие браузеров Internet Explorer до версии 7 стандартам CSS, принятым W3C. Поэтому для успешной без табличной верстки для более ранних версий IE, чем 7, требуется использовать ряд специальных конструкций, называемых CSS хаки. Важно также что и для других браузеров иногда случается необходимость использовать CSS хак.

Рассмотрим возможное написание CSS, которое принималось бы только отдельными видами браузеров:

CSS для IE 5, 5.5, 6, 7.

БраузерыIE давно поддерживают так называемые условные комментарии, которые делают контент видимым только для IE. Условные комментарии – это просто сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.

Для их использования нужно :

Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE. Потом таблица стилей с исправленными ошибками сохраняется отдельно и становится таблицей стилей для всех версий IE (например, all-ie.css). Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).
Далее необходимо последовательно подключить эти таблицы стилей через HTML-код с помощью условных комментариев.

<!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie.css" /><![endif]-->

Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6, а также IE7 и IE8:
Если вам необходимо применить условный комментарий только для IE 5, то просто укажите версию 5.0 в условииif IE 5.0:

<!--[if IE 5.0]>  <link rel="stylesheet" type="text/css" href="ie-5.0.css" /><![endif]-->

Также делаем и для IE 5.5, 6.

Если требуется, используя условные комментарии, исправить баг с боксовой моделью в браузерах IE5 и IE5.5, то можно использовать часть индекса версии или операторы сравнения. Первый пример подключит таблицу стилей к любой версии Internet Explorer первая цифра которой 5:

<!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" /><![endif]-->

В качестве альтернативы, можно указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:

<!--[if lt IE 6]>  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" /><![endif]-->

Вместо lt (less then — меньше) можно также использовать lte (less then or equal to — меньше или равен), gt (greater then — больше), gte (greater then or equal to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат.

Если не требуется, чтобы общие таблицы стилей доминировали над таблицами, которые созданы специально для IE, то нужно подключать сначала общие таблицы, а уже потом таблицы для IE. На примере это выглядит так:

<link rel="stylesheet" type="text/css" href="common.css" /><!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie.css" /><![endif]--><!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie-6.0.css" /><![endif]--><!--[if lt IE 6]>  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" /><![endif]-->

Возможно, одной из самых приятных частей этой техники является то, что ваши таблицы стилей и ваши тщательно оформленные (X)HTML документы сохранят полное соответствие спецификации.
Например, надпись «HTML-код» будет отображаться во всех браузерах кроме IE6, если поместить её в условный комментарий следующим образом:

<!--[if !IE 6]>     <p>HTML-код</p><![endif]-->

Условные комментарии в IE можно использовать везде на странице, а не только для объявления таблиц стилей для соответствующей версии браузера. Можно выводить пользователям IE какую-то дополнительную информацию, которая не видна пользователям других браузеров. Аналогично условным комментариям в IE 5--IE 8 поддерживается тег.

<comment>...</comment>

Этот тег позволяет скрыть информацию от пользователей IE, таким образом код:

Это <comment>не</comment> браузер Internet Explorer

пользователям IE будет показан как: Это браузер Internet Explorer, а пользователям других браузеров — Это не браузер Internet Explorer
Тег

<comment>

не валиден.

CSS хаки IE

Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7.

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

Для IE6 существует возможность поставить минус (-) или нижнее подчеркивание (_) перед свойством, при этом IE7 не отреагирует на него. Можно также использовать конструкцию:

* html .style {...}

Например:

.style {      background: red; /* для нормальных браузеров */      //background: green; /* для всех IE */      -background: blue; /* для IE6 */}* html .style {      background: blue; /* другой способ для IE6 */}

В этом случае фон будет красным в браузерах Opera и Firefox, зеленым в IE7 и синим — в Internet Explorer 6.

В примере меняется цвет фона для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.

Для IE7 используется CSS хак:

*:first-child+html .style {...} или*+html .style {...} 

CSS для Firefox

Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox.

[code]html:root .style {...}  /* этот работает ещё и для Safari */  или.style, x:-moz-any-link {...} 

[/code]


Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика Firebug — является лучшим среди аналогов.
CSS для Opera

CSS хаки для браузера Opera представлены следующими примерами:

html:first-child .style {...}

или (но эту конструкцию видят и современные Mozilla Firefox)

@media all and (min-width: 0) {      .style {...}} 

Чтобы было видно только браузеру Opera версии от 10 и выше надо писать так:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {.element{/*описание стиля только для Оперы*/}} 

можно загрузить целый css, как это делали для IE:

<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />

и, наконец, можно воспользоваться /Java Script, в котором загрузить нужные таблицы стилей:

if (navigator.userAgent.indexOf(’Opera’) != -1) {    alert("Я - Opera");    document.write(””); // тут ваш код для Opera}else {    alert("Я - другой браузер");    document.write(””); // тут ваш код для всех остальных}