Различия между IE6, IE7 и IE8. Часть первая

Автор оригинала: Louis Lazaris
  • Перевод
(От перев. Данная статья не претендует на полноту и непротиворечивость, потому мы не будем строить на ее основании никаких теорий. Это всего лишь практическое пособие для разработчиков, немного исправленное и дополненное мной под реалии Рунета.)

Одним из самых странных статистических фактов, связанных с использованием браузеров, является широкая распространенность Internet Explorer версии 6, 7 и 8. На сегодняшний день все версии Internet Explorer вместе занимают примерно 65% рынка используемых в настоящее время браузеров. Среди веб-разработчиков эта цифра ниже, здесь доля пользователей IE составляет лишь 40% рынка.
(От перев. Надеюсь, эти 40% составляют лишь несчастные верстальщики, проверяющие свои сайты на предмет кроссбраузерности. Статистика по Рунету доступна, например, здесь. Заметьте, в сентябре у всех браузеров IE-семьи график без видимых причин подскочил — это вернулись за свои компьютеры офисные пользователи, самые преданные почитатели наших героев.)

Интересно, что популярность браузеров семейства IE примерно одинакова, нельзя выделить один доменирующий браузер, как это было ранее. (От перев. Конечно, нельзя. Вот смотрю и ну никак не могу выделить доминирующий браузер. =) ) Таким образом, сейчас веб-разработчики обязаны проверять работоспособность своего проекта в различных браузерах, разрабатывая как сайты для своих заказчиков, так и персональные странички.

Конечно, благодаря различным Javascript-библиотекам, кроссбраузерное тестирование сейчас стало настолько хорошим, насколько данная ситуация вообще позволяет это сделать. (От перев. А еще есть возможность сделать скриншоты в разных браузерах, IE Collection и тому подобные ухищрения) Но есть в этом что-то неправильное, особенно если взглянуть на результат работы трех использующихся версий IE.

Эта статья является попыткой дать исчерпывающую, легкую в восприятии информацию для веб-разработчиков, пытающихся понять различия в обработке CSS между IE6, IE7 и IE8. Здесь собраны краткие описания для свойств, поддерживаемых одним или двумя браузерами, но не всеми тремя сразу. Здесь не рассматриваются свойства, не выполняемые ни одним из IE, а также специфичные только им. Таким образом, акцент стоит именно на различиях между браузерами, а не на недостатке поддержки ими тех или иных CSS-свойств.


Селекторы и наследование


Дочерние селекторы

Пример:
body>p {
   color: #fff;
}

Описание:
Дочерний селектор выбирает все элементы, которые являются непосредственно дочерними для указанного родителя. В указанном выше примере body является родителем, а p — дочерним. (От перев. Для IE7+ нужно также указывать верный Doctype для правильной работы.)
Поддержка: IE7, IE8
Ошибки: В IE7 дочерний селектор не будет работать, если между ним и родительским элементом будет HTML-комментарий.

Связные классы

Пример:
.class1.class2.class3 {
   background: #fff;
}

Описание:
Связные классы используются, когда один элемент имеет несколько классов, например так:
<dіv class="class1 class2 class3">
   <р>Какой-то текст.</р>
</dіv>

Поддержка: IE7, IE8
Ошибки: IE6 это свойство не поддерживает, потому что он применяет это CSS-свойство для элементов последнего класса (От перев. в примере класс class3), а не только для тех, которые отмечены сразу всеми классами.

Селекторы с атрибутами

Пример:
a[href] {
   color: #0f0;
}

Описание:
Это свойство позволяет элементу быть отмеченным только в том случае, если у него присутствует указанный аттрибут. Например, в вышеприведенном примере отмечены будут все ссылки с аттрибутом href, тогда как для всех остальных данное свойство применено не будет.
Поддержка: IE7, IE8

Смежные соседние селекторы

Пример:
h1+p {
   color: #f00;
}

Описание:
Этот селектор определяет свойства элементов, смежных и следующих сразу определенным селектором. Например, в коде ниже
<Н1>Заголовок</Н1>
   <р>Какой-нибудь текст.</р>
   <р>Какой-нибудь другой текст.</р>

свойства CSS будут применены только к первому абзацу.
Поддержка: IE7, IE8
Ошибки: В IE7 дочерний селектор не будет работать, если между ним и родительским элементом будет HTML-комментарий.

Общие соседние селекторы

Пример:
h1~p {
   color: #f00;
}

Описание:
Определяет свойства для всех соседних элементов, следующих за определенным селектором. Например, если воспользоваться вышеуказанным примером, то данное свойство распространится и на первый, и на второй абзацы. Заметим, что если бы абзац шел перед заголовком, то данное свойство на него не распространялось бы.
Поддержка: IE7, IE8

Псевдоклассы и псевдоэлементы


Дочерние селекторы после псевдокласса :hover

Пример:
a:hover span {
   color: #0f0;
}

Описание:
Элемент может быть отмечен как дочерний аналогично любому другому селектору. В приведенном примере элемент span внутри ссылки будет менять цвет текста на зеленый.
Поддержка: IE7, IE8

Связные псевдоклассы :hover

Пример:
a:first-child:hover {
   color: #0f0;
}

Описание:
Псевдокласс может быть связан с соседним элементом. В примере выше, отмечается каждая ссылка, являющаяся первым дочерним элементом своего родителя и применяющая пседокласс :hover к нему.
Поддержка: IE7, IE8

Связные псевдоклассы :hover

Пример:
a:first-child:hover {
   color: #0f0;
}

Описание:
Псевдокласс может быть связан с соседним элементом. В примере выше, отмечается каждая ссылка, являющаяся первым дочерним элементом своего родителя и применяющая пседокласс :hover к нему. (От перев. Не понял, прошу поправить, если неверно.)
Поддержка: IE7, IE8

Псевдокласс :hover для других селекторов

Пример:
div:hover {
   color: #f00;
}

Описание:
Псевдокласс :hover можно применять для любых селекторов, а не только для a.
Поддержка: IE7, IE8

Псевдокласс :first-child

Пример:
div li:first-child {
   background: blue;
}

Описание:
Определяет свойства для первичных дочерних селекторов выбранного класса.
Поддержка: IE7, IE8
Ошибки: В IE7 селектор не будет работать, если между родительским и дочерним элементами будет HTML-комментарий.

Псевдокласс :focus

Пример:
a:focus {
   border: solid 1px red;
}

Описание:
Определяет свойства для элементов в фокусе.
Поддержка: IE8

Псевдоклассы :before и :after

Пример:
#box:before {
   content: "Этот текст расположен перед блоком.";
}

#box:after {
   content: "Этот текст расположен после блока.";
}

Описание:
Генерирует текст, располагаемый до и после данного блока.
Поддержка: IE8

(От перев. За сим первую часть перевода заканчиваю. Интересна ли тебе эта тема, %username%? Стоит ли развивать ее и дополнять собственными мыслями, или лучше забыть о ней, ведь все мы верим в то, что ИЕ6 когда-нибудь исчезнет из десктопов? Буду рад советам и подсказкам.)

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 81

    +6
    «a:hover span» — прекрасно работает в ie6
      –3
      У меня в IE Collection ничего не происходит. У Вас точно ИЕ6? =) Может, это IE Collection недорабатывает?..

      Смотрел такую страничку, если что: yeidea.ru/ie6.php
        +2
        a:hover p
        — не работает

        a:hover span
        — работает
        • НЛО прилетело и опубликовало эту надпись здесь
            +9
            a:hover p — это в принципе неверно, очень много чего в ие6 начинает вести себя не так, если изначально блочный элемент (даже с дисплей: блок) вложить в строчный.
              +1
              Опечатался, а никто не заметил. Правильнее будет так:
              «если изначально блочный элемент (даже с дисплей: инлайн) вложить в строчный (будь он даже дисплей: блок)»
              +7
              > a:hover p
              > — не работает

              Нельзя ставить блоки внутри инлайновых элементов!
                –1
                А почему нельзя? Выходит что-то подобное на inline-block.
                • НЛО прилетело и опубликовало эту надпись здесь
              • НЛО прилетело и опубликовало эту надпись здесь
                • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  Смотря что туда повесить (на спан)! Если цвет, то работает, а если бордюр, то не работает.
                    0
                    Кстати, можно делать что угодно при ховере на ссылку с вложенными, если ссылке прописать a:hover { zoom: 1; }.
                    0
                    a:hover p
                    — не работает


                    это не работает потому что внутрь строчного элемента нельзя впихнуть блочный.

                    так же нельзя вложить параграф в параграф!

                    Всё это описано в правилах семантики кода.
                +1
                Одним из самых странных статистических фактов,

                Странно, что Льюис не догадывается о причине…
                  +1
                  В оригинале все как-то нагляднее и полнее. Кстати, лучше было бы просто составить итоговую таблицу «свойство/браузер». Язвительные комментарии от переводчика к каждому абзацу — это уже как-то другой жанр, вы определитесь: либо вы комментируете, либо вы даете перевод авторской статьи.

                  Кстати, как-то нелепо ожидать поддержки в браузере восьми(!)-летней давности всех этих CSS-селекторов. Если вы составите сухую выжимку из статьи в виде таблицы — о ужас! — окажется, что напротив IE6 везде стоит No, а напротив IE8 везде стоит Yes. Так о чем и зачем эта статья?
                    –1
                    Перевожу с собственными комментариями, я же написал сразу =) Сами видите, данные в статье не везде сообтветствуют положению дел у нас.

                    А статья — показать, что хоть ИЕ6 и плох, но ИЕ7 достаточно хорош, почти настолько же хорош, как и ИЕ8.
                    –7
                    Да не трож ты гафф… но, вонять не будет.
                      +2
                      Для кого эти отличия? Осмелюсь предположить, что для начинающих верстальщиков. Может не стоит их уже грузить старьём типа IE6? Я конечно понимаю, меня сейчас будет убеждать толпа народу, что IE6 ещё жив, есть живые пользователи, устаревшие корпоративные стандарты ПО завода около деревни Гадюкино и т.п.

                      На это могу лишь ответить одно — плевать. 20-25% времни верстки, у меня, вёрстки уходит исключительно на то, что бы заставить работать так как мне нужно сами стили (что в принципе не очень сложно), но и JS (что сложнее). Я говорю о серьёзной верстке, а не о хомячках с пятком слоёв. Мои 20-25% стоят дорого, а время начинающих — дешевле — пользуемся этим что ли?
                        –10
                        > устаревшие корпоративные стандарты ПО завода около деревни Гадюкино и т.п.
                        WinXP&IE6 — корпоративные стандарты подавляющего большинства крупнейших мировых корпораций. Ультрасовременное ПО (Win7&IE8) могут себе позволить только мелкие компании.
                        Альтернативное ПО (Linux&FF&OO) могут себе позволить только мелкие компании, в которых главный айтишник идиот.

                        Чтобы понять стандарты крупных корпораций, надо в них сначала немного поработать.
                          +3
                          Согласен, с работой в крупных корпорациях у меня как-то пока не сложилось.
                          Расскажите пожалуйста, почему крупные корпорации не обновят свой парк машин хотя бы на IE7?
                            0
                            1. Политика безопасности. В крупных организациях запрещено скачивать и устанавливать самостоятельно софт. В отдельных конторах отсутствует не только выход в Сеть но и подключение любых внешних носителей.
                            2. Наличие собственного софта, базирующегося на ie6; экономия трафика; нехватка сервисных инженеров; 3. Это вообще не та проблема, которую нужно решать.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                >обновилось в рамках WindowsUpdate
                                В предыдущей «большой» конторе где работал, был отключен сайт MS. Автоматическое обновление так же было выключено. Был так же запрет на скачивание любых исполняемых файлов, аудио, видео т.п. Так же не было прав на установку софта. Для этого требовалось писать служебные записки в службу главного инженера.

                                >Экономия трафика?
                                В другой предыдущей «большой» конторе в некоторых подразделениях были лимиты на трафик + еженедельные распечатки по трафику с орг.выводами и карательными мерами, если трафик нецелевой.
                                  0
                                  а ещё бывает что стоит даже не ХР
                                  у нас тут медиахолдинг, издаём >10 журналов разной тематики, парк на 350+ машин и везде — вин2к
                                  и во всём это приходится работать веб разработчикам :)
                                    0
                                    Удивительно. Как же вы продукцию выпускаете без аэро-дизайна? :)
                                    Я предыдущие 14 лет тоже в аналогичных издательствах работал.
                                  +1
                                  когда из 100 машин после апдейта не загрузились 2 это как бы не криминально, но вообщем у 2х человек работа стоит, а тебе куча гемороя. но если эти 2 машины главбуха и гендира можно смело вешатся. так что отключенный апдейт это очень даже оправдано. и вообще мудрую мысль — «работает? только ради бога ничего не трогай» никто не отменял. отсюда и письма и специальные разрешения.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      антивирусники\атиспаи никто не отменял.
                                      + у многих просто нет выхода в интернет как уже говорили.
                                      так принято большим начальством- я просто работал пару лет в такой канторе…
                                      :) больше не хочу.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          –1
                                          это правильное распределение — безопасность именно информационная (в более широком смысле чем IT) имеет много граней и вирусы\атаки на практике это гораздо меньшее зло чем социальный взлом и тупо вербовка кого то или внедрение. такой человек украдет гораздо больше информации осмыслено и причинит больший вред.
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0
                                              я в той компании уже давно не работаю. и деталей снижения такого риска не знал тогда а сейчас еще и подзабыл. более того предыдущий мой пост скорее выраженное моими словами мнение начальника первого отдела. затраты на автоапдейты это нервы админа при истерике идиота из руководства если вдруг что то пошло не так.
                                              мир таков — все всегда правильно сделать не получается даже в IT
                                0
                                если не видно разницы, зачем платить больше? (С) =))))
                                Просто директоры в этом не шарят, поэтому и не хотят обновляться, а нам из-за них мучаться :(
                                +2
                                >WinXP&IE6 — корпоративные стандарты подавляющего большинства крупнейших мировых корпораций

                                Только там, где ИТ-менеджмент лентяи и дормоеды.

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

                                Сегодня за IE6 и OutlookExpress на заражённой Windows XP SP1 или SP2, надо ИТ отдел увольнять нахрен.

                                Мне надоело после очередного похода в банк или в крупную контору с такими «корпоративными стандартами» объяснять по телефону, что к электронному ключю мне пачка троянов не нужна.
                                0
                                Для интранет сайтов этот подход уместен, но вот для сайтвов, которые будут публиковаться в интернете, проще нанять начинающих на сдельную оплату, ибо их время дешевле.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Эмн… Если сайт более менее серьезный, то в 100% случаев заказчик готов оплатить ваши 25%, чтоб не потерять целых 10% пользователей.
                                      0
                                      Иногда платят. Но в последнее время отказываются и плюют на старые браузеры.
                                    0
                                    что-то в связи с последней тенденцией верстать все одиночными блочными классами (как Харисов предлагает), верстка дочерними и соседними элементами не очень-то востребована. Да и условные комментарии — в принципе, неплохая вещь. Особенно с учетом их серверной поддержки и последующего объединения в свои наборы стилей
                                      0
                                      Совершенно ненужные комментарии «от перев.» в подобной статье негативно сказываются как на восприятии самой статьи, так и на имидже переводчика.
                                        +2
                                        В прошлый раз переводил статью без комментариев, сказали что нужно больше от себя добавить. Прошу прощения.
                                          0
                                          Просто комментарии в статье написаны так, будто намекают, что автор оригинала недалёк, а переводчик знает истину. Это некрасиво.
                                            0
                                            Сужу об авторе статьи лишь по его статье. А в ней многие факты не то, чтобы банальны, но достаточно очевидны, а автор использует их для логического построения текста: надо показать, что верстальщики должны учитывать все три версии ИЕ, так давайте положим, что их доли равны. На данный момент ситуация с разхделением браузеров не так страшна, я считаю =)

                                            Собственно, комментарии относятся только к «лирике» в статье.
                                        0
                                        Остаюсь при своем мнении, статья бесполезная. А перевод… ну достаточно посредственный. Комментарии по большему счету никак не относятся к теме.
                                          +2
                                          мне показалось или «Связные псевдоклассы :hover» имеет дважды одинаковый код-экзампл?
                                            0
                                            Полезность для практического применения сомнительная (на IE6-7 проще просто забить, чем заниматься эмуляцией неподдерживаемых селекторов), но почитать было интересно.
                                              +2
                                              где-то среди комментариев на хабре было написано, что все хотят забить, но когда заказчик сидит в 6м ИЕ и у него всё «плывёт» — то забить не получается.
                                              а жаль, на поддержку IE6 (не говорю про остальные версии) уходит много времени…
                                                +1
                                                Аналогичная ситуацияс клиентом на ИЕ6. Точнее, он сидит на аванте, который, судя по всему, использует движок, аналогичный ИЕ6.
                                                  0
                                                  оригинально.

                                                  посмотрел на аватар и секунд на 10 завис в поисках */ в конце поста )))
                                                    +2
                                                    Ищу брата-близнеца с закрывающим тегом =)
                                                      0
                                                      так? :)
                                                  +2
                                                  Барабанная дробь! И тут входит chrome frame.
                                                –5
                                                ИЕ 7 отличается от ИЕ 6 наличием вкладок. Всё.
                                                  +1
                                                  Вы почти правы.
                                                    0
                                                    в в корне не правы. Посмотрите как отображает сайт ie6 и как ie7.
                                                    Из значимого — поддержка прозрачности png24. Да и в принципе адекватность у него в разы выше, нем у 6 версии.
                                                      +2
                                                      Наложите 2 пнг с альфой друг на друга в ие7. Уж лучше бы совсем не делали, чем такую поддержку. В ие6 крабом пнг и то нормальнее себя ведёт.
                                                        0
                                                        не могу пройти мимо, в png24 нет полупрозрачности, ибо 24 бита — это (о ужас) 3 цветовых канала, синий зеленый и красный.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        дикий бред
                                                        0
                                                        С нетерпением ждём вторую часть перевода / все последующие
                                                          0
                                                          Окей =)
                                                          0
                                                          Добавлю еще один пункт: внедрение/обновление ПО в рамках корпорации это всегда чрезвычайно сложный, трудоемкий и дорогой процесс, даже если само ПО бесплатно. Всегда при обновлении ключевого для бизнеса ПО следует разный по срокам период падения прибыли или высоких издержек. Поэтому на изменения в ИТ-процессах корпорации идут только если возможная прибыль покроет издержки с лихвой.
                                                          Но 3 пункт в случае с браузером самый главный — нет никакой необходимости.

                                                          Вебдевелоперы вообще не понимают главного: пользователя совершенно не интересуют технологии сайта — серверные или клиентские. Его интересует контент и только. Зайдите на Plenty of Fish, ужаснитесь дизайну и верстке, скорее всего на сервере все так же плохо. Тем не менее это один из популярнейших сайтов, приносящий владельцу огромный доход.
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                +1
                                                                xhtml.ru/2008/01/08/css-selectors/ — этим пользуюсь.
                                                                  –1
                                                                  gs.statcounter.com/#browser_version-ww-monthly-200809-200910-bar в Европе дает приблизительно равное использование ФФ и ИЕ7

                                                                  в Украине первое место за Оперой. очень забавно
                                                                    0
                                                                    Так всегда было.
                                                                    0
                                                                    насколько я помню multiple classes в IE7 полноценно работают только для двух классов, пруфлинк сходу найти не смог.
                                                                      0
                                                                      Веб-разработчикам надо мотивировать клиентов использовать нормальные браузеры, или, как минимум, свежие версии IE.

                                                                      ie6 во многих случаях стоит на газетах-заводах-пароходах крупных предприятиях у тётушек с большими очками бухгалтеров, секретарей и прочих сотрудников, которые просто не компетентны. По крайней мере, такова ситуация у нас, в суровом Челябинске.

                                                                      В нашей стране много талантливых хакеров. Напишите уже кто-нибудь безобидный вирус, использующий уязвимости старых ie, чтоб он просто предлагал обновить браузер каким-нибудь очень надоедливым способом.
                                                                        0
                                                                        //бухгалтеров, секретарей и прочих сотрудников, которые просто не компетентны

                                                                        Мой бухгалтер ненавидит ie, но банк-клиент и миллионы специфичных приложений только в ie6 и работают. Зря вы так.
                                                                          0
                                                                          Ничего против конкретно вашего бухгалтера не имею, но во многих случаях дело обстоит именно так.
                                                                        0
                                                                        По поводу IE6:



                                                                        Вы тестируете в Опере Мини? Только честно.
                                                                          0
                                                                          Статистика нашего топового магазина по посещаемости:
                                                                          1.FF3.6
                                                                          2.IE7
                                                                          3.IE8
                                                                          4.IE6
                                                                          5. оперы, сафари и экзотическая живность

                                                                          Как видно, первое место приятно, второе терпимо, третье заманчиво, четвёртое… Да. Пришлось изучить много матных слов, но мы его победили. Также как и оперу под мак и FF под линукс. Просто потому что если сайт приносит деньги он должен быть везде одинаков и с единым функционалом. И если ваш сайт посещают пользователи ie6 игнорировать их глупо.
                                                                            0
                                                                            Вопрос в том, каков процент таких пользователей и какая прибыль в среднем с одного пользователя.

                                                                            Если эти деньги меньше стоимости поддержки IE6, очевидно, стоит забить. Иначе, очевидно, забивать не стоит. :)
                                                                              0
                                                                              У нас специфика такая, что сегодня он принёс 1 000 прибыли, через месяц 1 000 прибыли, через два месяца… Ну вы поняли.
                                                                              По метрике и гугланалитику они не просто так сидят, эти шестые. Доход есть и высок.
                                                                                0
                                                                                А если не секрет, какие страны и какая примерно доля msie6?

                                                                                Судя по отсутствию в топе Оперы, речь явно идет не о ex-USSR. По statcounter-у тому же, доля IE6 в тех же США уже пренебрежимо мала (хотя, смотря как посмотреть, каждый 20й потенциальный покупатель это немало). Интересно стало :)
                                                                                  0
                                                                                  FF 3.6- 36 000
                                                                                  IE7- 30 000
                                                                                  IE8-27 000
                                                                                  IE6-13 000

                                                                                  Опер тоже много, но меньше 10 000 посещений в месяц.

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

                                                                        Самое читаемое