Одной из самых странных статистических данных о браузерах является то, что версии интернет -проводника 6, 7 и 8 сосуществуют. На этой статье версии Internet Explorer составляют примерно 65% доли рынка в общей сложности. В сообществе разработчиков веб -сайта это число намного меньше, и статистика показывает, что он составляет всего около 40%.
Более интересная часть этих статистических данных заключается в том, что значения между IE6, IE7 и IE8 очень близки, что предотвращает один браузер Microsoft доминировать над противоположностью прошлого. Согласно этой прискорбной статистике, разработчикам необходимо провести комплексное тестирование всех используемых в настоящее время браузеров IE при разработке веб -сайтов для клиентов, а также привлечет больше пользователей в личных проектах.
Благодаря этим библиотекам JavaScript (Frameworks), тестирование JavaScript Cross-Browser настолько близок к идеальной ситуации. Но это не так в разработке CSS, особенно в трех версиях в настоящее время в IE.
В этой статье пытается предоставить подробную и простую в использовании ссылку для различных разработчиков, которые хотят понять поддержку CSS для IE6, IE7 и IE8. Эта ссылка содержит обзор и совместимость следующих ситуаций:
A. Один из трех браузеров поддерживает записи, но два других нет.
Б. Два из трех браузеров поддерживают запись, но другой не поддерживает ее.
Эта статья не будет обсуждаться:
A. Записи, которые не поддерживаются тремя браузерами
Б. Частные атрибуты
Следовательно, в центре внимания этой статьи находится разница между тремя браузерами, а не на необходимых недостатках поддержки. Список разделен на следующие пять частей:
1. Селектор и наследство
2. псевдо-классы и псевдо-элементы
3. Поддержка атрибутов
4. Другие технологии
5. Важные ошибки и проблемы несовместимости
1. Селектор и наследство
А. Подселектор
Пример
| тело> p { Цвет: #ffff; } |
описывать
Дочерний сектор выбирает все прямые дочерние элементы определенного родительского элемента.
Поддерживать
| Т.е. нет IE7 Да IE8 Да |
Ошибки
В IE7, если есть HTML -комментарий между родительским тегом и тегом ребенка, детский селектор не будет работать.
Б. Цепь
Пример
| .class1.class2.class3 { Фон: #ffff; } |
описывать
Класс цепи используется для отправки элемента HTML с объявлениями множественного класса, например, это:
| <div class = "class1 class2 class3"> <p> содержание здесь. </p> </div> |
Поддерживать
| Т.е. нет IE7 Да IE8 Да |
Ошибки
IE6, кажется, поддерживает эту ситуацию, потому что она может соответствовать последнему классу в цепочке с элементом, который использует класс, однако, он не ограничивает элемент, который использует все классы в цепочке.
C. Селектор атрибутов
Пример
| a [href] { Цвет: #0F0; } |
описывать
Этот селектор позволяет позиционировать элемент до тех пор, пока он указал свойства. В приведенном выше примере все теги с атрибутом HREF будут ограничены, в то время как теги без атрибута HREF не будут ограничены.
Поддерживать
| Т.е. нет IE7 Да IE8 Да |
D. Приблизительно братского селектора
Пример
| H1+p { Цвет: #F00; } |
описывать
Этот селектор находит теги брата, которые находятся близко к указанному элементу. Приведенный выше пример ограничит тег P, но он должен быть братом тега H1 и должен следовать непосредственно за тегом H1. например:
| <h1> заголовок </h1> <p> содержание здесь. </p> <p> содержание здесь. </p> |
В приведенном выше коде стиль CSS будет работать только для первого p. Потому что это брат H1 и немедленно следует H1. Второй P также является братом H1, но он не сразу же следует H1.
Поддерживать
| Т.е. нет IE7 Да IE8 Да |
Ошибки
В IE7, если между братьями и сестрами есть HTML -комментарий, смежный селектор братьев и сестер будет недействительным.
E. Обычный брат -селектор
Пример
| H1 ~ p { Цвет: #F00; } |
описывать
Этот селектор определяет все элементы братьев и сестер по указанному элементу. Применение этого селектора к приведенному выше примеру будет работать для обоих p -тегов. Конечно, если элемент P появляется перед H1, этот элемент P не будет сопоставлен.
Поддерживать
| Т.е. нет IE7 Да IE8 Да |