Как обойти это: IE6 не поддерживает CSS "атрибут" селекторы

Один из проектов, над которым я работаю, использует селектор CSS "attribute" [att]

CSS селекторы

который не поддерживается ie6: поддержка селекторов CSS в IE6 (см. текст "Селекторы атрибутов")

Есть ли обходной путь / взлом, который, конечно, действительный HTML / CSS, чтобы преодолеть эту проблему?

Источник

7 ответов

Решение

Поскольку IE6 существенно ограничен:

  • селекторы классов
  • Селекторы ID
  • (пробел) селекторы потомков
  • а:-псевдоселекторы

Ваши единственные варианты:

  • Используйте больше классов, чтобы идентифицировать ваши элементы
  • Использовать JavaScript (настоятельно не рекомендуется, за исключением особо специализированных случаев)

Я считаю очень полезным использовать возможность присваивать элементу несколько классов, разделяя их пробелом: class="foo bar"

Источник

К сожалению, это невозможно без добавления в ваш HTML стека посторонних селекторов классов.

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

Источник

Если вам нужен селектор атрибутов в IE6, вы можете использовать Dean Edward IE.js. http://dean.edwards.name/IE7/

Это сделает IE 5+ более похожим на IE7

поддерживает следующие селекторы CSS: 
родитель> ребенок
смежный + родной брат
смежный брат
[attr], [attr="value"], [attr~="value"] и т. д..multiple.classes (исправляет ошибку): hover,: active,: focus (для всех элементов): первый ребенок, последний ребенок, единственный ребенок, nth-child, nth-last-child: проверено,: отключено,: включено: empty,: содержит (),: не (): До /: после / содержания:: Языки ()

У меня не было IE6 (используйте IE7), поэтому я не могу сказать, что это сработало, но попробуйте

Источник

Вы можете использовать CSS-выражения Internet Explorer в сочетании с безопасным хакером CSS ("_", IE6 и более ранними):

/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */
abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

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

Выше можно изменить на:

.ie6 abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

Это если ваш HTML начинался как:

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
Источник

Библиотека JavaScript Дина Эдвардса IE7 обеспечивает поддержку селектора атрибутов для IE 5 и 6.

Источник

Используйте классы, это единственный выход, к сожалению.

Источник

Если вы используете jQuery на своем сайте, другой вариант - SuperSelectors - он просматривает таблицы стилей вашего сайта, динамически добавляя классы к элементам, так что даже IE6 может греться в свете надлежащей поддержки селекторов CSS, таких как ul li:first-child li:nth-child(odd) a:hover,

Источник
Другие вопросы по тегам