Главная > Секреты верстки сайтов > Код CSS, который понимает только Internet Explorer

Код CSS, который понимает только Internet Explorer

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

IE против Mozilla

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.


Чтобы код CSS понял только браузер IE нужно между свойством класса и значением свойства ставить не двоеточие, а знак равно. Другие браузеры, кроме Internet Explorer, такую команду проигнорируют, поскольку такая запись не описана в стандартах верстки W3C. Чтобы было понятнее, рассмотрим два практичных примера описания стиля CSS.

Пример 1: Как задать отступ блока только для IE

.example1_css_style {
margin-left: 20px;
margin-right=45px;
margin-top: 10px;
}

В этом классе первая строчка приказывает всем браузерам сделать отступ слева на 20 пикселей, а вторая – отступ на 45 пикселей справа, но только для Internet Explorer. Во всех остальных браузерах, кроме IE, отступа справа не будет.

Пример 2: Как задать разные значения одного и того же свойства CSS для каждого браузера

.example2_css_style {
margin: 0px 0px 0px 0px;
margin= 22px 22px 0px 0px;
}

В этом примере стиля CSS сначала все браузеры, в т.ч. и Internet Explorer, устанавливают нулевые отступы для блока. А во второй строчке только Internet Explorer делает отступы по 22 пикселя сверху и справа, другие браузеры эту команду не понимают и игнорируют. Т.е. для IE свойство стиля margin задается 2 раза, второй раз перезаписывая предыдущий, а для других браузеров – один раз, первый.

Вот такой простой пример того, как можно немного подправить верстку для разных типов браузеров с помощью CSS. Конечно, злоупотреблять им не стоит, иначе неоднозначности при описании вложенных стилей будут накапливаться, что приведет к появлению труднообнаружимых ошибок. Но для корректировки стилей CSS на последнем уровне вложенности, когда совсем не получается объяснить IE, что он не прав, применять эту хитрость можно. Пока опыта верстки сайтов не будет достаточно, чтобы интуитивно избегать возможных неоднозначностей в своем коде.

Сервисный центр «Мобильный Мастер» проведет iphone ремонт в Одессе с гарантией. Если вы не хотите переплачивать, обратитесь к специалистам именно этой компании.

Читайте также:

11 комментариев к “Код CSS, который понимает только Internet Explorer”

  1. art пишет:


    спасибо, это проще, чем писать отдельный файл стилей

  2. Никита пишет:


    Здравствуйте!
    Вот цитирую вас: «Чтобы код CSS понял только браузер IE нужно между свойством класса и значением свойства ставить не двоеточие, а знак равно. Другие браузеры, кроме Internet Explorer, такую команду проигнорируют, поскольку такая запись не описана в стандартах верстки W3C. Чтобы было понятнее, рассмотрим два практичных примера описания стиля CSS.»
     
    А ведь это не работает. Почему?
     

  3. Alexandr пишет:


    Никита, что именно у вас не работает?

  4. Никита пишет:


    Если поставить равно после какого-либо из свойств селектора, то значение будет проигнорировано как Operой, Mozilой, так и IE.
     
    Экспериментировал —  ничего не получилось.

  5. Alexandr пишет:


    Никита, только тчто проверил: в ie6 и ie7 работает, в Opera 9.1, Mozilla 3.5.1 и Netscape 9.0 — не работает. Ищите ошибку в своей верстке

  6. Shinkonsen пишет:


    СПАСИБО!!!
    «Чтобы код CSS понял только браузер IE нужно между свойством класса и значением свойства ставить не двоеточие, а знак равно.»
    Это действительно работает!!!

  7. Ведьмак пишет:


    У меня такая же херня… не работает в IE 8

  8. Alexandr пишет:


    На IE8 я не тестит, возможно, в Майкрософте уже исправили эту особенность Internet Explorer

  9. Тукан пишет:


    у меня кошмар какой-то!!! интернет экплорер совершенно не воспринимает разметку таблиц и даже размеры изображений некорректно воспроизводит…  помогите пожалуйста!!!

  10. Ray пишет:


    IE 9 все корректно работает, спасибо

  11. feo пишет:


    Ну просто огромное СПАСИБО. Долго мучался с IE 9 был непонятный отступ, а в других браузерах нет. Сделал со знаком = минус отступ и все стало на свое место! Ура.

Прокомментируете вышенаписанное?

* обозначены обязательные для заполнения поля