Различия между IE6, IE7 и IE8

До сих пор в просторах интернета широко распространен Internet Explorer 6, 7 и 8 версий.

Причем, популярность браузеров семейства 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

Все мы верим в то, что ИЕ6 когда-нибудь не станет.