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

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

Селектора CSS

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

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

ОТВЕТЫ

Ответ 1

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

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

возможны только следующие варианты:

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

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

Ответ 2

Это невозможно, без печального HTML-кода с стеком чужих селекторов классов.

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

Ответ 3

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

Ответ 4

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

/* 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]-->

Ответ 6

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

Ответ 7

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