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

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

14 голосов
/ 16 марта 2009

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

Селекторы CSS

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

Есть ли обходной путь / хак, который, конечно, является допустимым html / css для преодоления этой проблемы?

Ответы [ 7 ]

26 голосов
/ 16 марта 2009

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

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

20 голосов
/ 16 марта 2009

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

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

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

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

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

8 голосов
/ 16 марта 2009

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

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

supports the following CSS selectors: 
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()

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

6 голосов
/ 22 ноября 2011

Вы можете использовать CSS-выражения Internet Explorer в сочетании с безопасным подчеркиванием («_», 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]-->
5 голосов
/ 16 марта 2009

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

2 голосов
/ 16 марта 2009

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

0 голосов
/ 21 апреля 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...