Интересная часть этой статистики заключается в том, что цифры для IE6, IE7 и IE8 очень близки, что не позволяет одному браузеру Microsoft доминировать на сцене — противоположность тому, что имело место в прошлом. Основываясь на этой прискорбной статистике, разработчикам необходимо тщательно тестировать все используемые в настоящее время браузеры IE при разработке веб-сайтов для клиентов, а это также может привлечь больше пользователей для личных проектов.
Благодаря JavaScript-библиотекам (фреймворкам) кроссбраузерное тестирование JavaScript настолько близко к совершенству, насколько это позволяет текущая ситуация. Но это не относится к разработке CSS, особенно когда речь идет о трех существующих на данный момент версиях IE.
В этой статье делается попытка предоставить подробный и простой в использовании справочник для различных разработчиков, которые хотят понять поддержку CSS для IE6, IE7 и IE8. Этот справочник содержит обзор и совместимость для следующих ситуаций:
A. Элементы, которые поддерживает один из трех браузеров, но не поддерживают два других.
Б. Элементы, которые поддерживаются двумя из трех браузеров, но не поддерживаются одним
В этой статье не обсуждаются:
А. Элементы, которые не поддерживаются тремя браузерами.
Б. Частные атрибуты
Поэтому в этой статье основное внимание уделяется различиям между тремя браузерами, а не необходимым недостаткам поддержки. Список разделен на следующие пять разделов:
1. Селекторы и наследование
2. Псевдоклассы и псевдоэлементы
3. Поддержка атрибутов
4. Различные другие технологии
5. Важные ошибки и проблемы несовместимости.
1. Селекторы и наследование
А. Субселектор
Пример
| тело > п { цвет: #fff; } |
описывать
Дочерний селектор выбирает все прямые дочерние элементы определенного родительского элемента. В приведенном выше примере body является родительским элементом, а p — дочерним элементом.
Статус поддержки
| IE6 Нет IE7 Да IE8 Да |
Ошибки
В IE7 дочерние селекторы не будут работать, если между родительским и дочерним тегами есть комментарий HTML.
Б. Тип цепи
Пример
| .класс1.класс2.класс3 { фон: #fff; } |
описывать
Класс цепочки используется для отправки HTML-элемента с несколькими объявлениями классов, например:
| <div class="класс1 класс2 класс3"> <p>Содержимое здесь.</p> </div> |
Статус поддержки
| IE6 Нет IE7 Да IE8 Да |
Ошибки
IE6, кажется, поддерживает эту ситуацию, поскольку он может сопоставить последний класс в цепочке с элементом, использующим этот класс, однако он не может ограничить использование элемента всеми классами в цепочке.
C. Селектор атрибутов
Пример
| а[href] { цвет: #0f0; } |
описывать
Этот селектор позволяет найти элемент, если он имеет указанные атрибуты. В приведенном выше примере все теги с атрибутами href будут квалифицированы, а теги без атрибутов href не будут квалифицированы.
Статус поддержки
| IE6 Нет IE7 Да IE8 Да |
D. Селектор ближайшего родственного элемента
Пример
| ч1+р { цвет: #f00; } |
описывать
Этот селектор находит родственные теги, расположенные рядом с указанным элементом. В приведенном выше примере будет использоваться тег p, но он должен быть родственным по отношению к тегу h1 и должен следовать непосредственно за тегом h1. например:
| <h1>заголовок</h1> <p>Содержимое здесь.</p> <p>Содержимое здесь.</p> |
В приведенном выше коде стиль CSS будет эффективен только для первой страницы. Потому что он является братом h1 и следует за h1. Второй p также является братом h1, но он не следует сразу за h1.
Статус поддержки
| IE6 Нет IE7 Да IE8 Да |
Ошибки
В IE7 соседние одноуровневые селекторы не будут иметь никакого эффекта, если между одноуровневыми элементами есть комментарий HTML.
E. Обычный одноуровневый селектор
Пример
| ч1~р { цвет: #f00; } |
описывать
Этот селектор находит все одноуровневые элементы, следующие за указанным элементом. Применение этого селектора к приведенному выше примеру будет применяться к обоим тегам p. Конечно, если перед h1 появляется элемент p, этот элемент p не будет сопоставлен.
Статус поддержки
| IE6 Нет IE7 Да IE8 Да |