14

我正在工作的项目之一使用 CSS“属性”选择器 [att]

CSS 选择器

ie6 不支持： 支持 IE6 中的 CSS 选择器（查找文本“属性选择器”）

是否有任何解决方法/破解当然是有效的 html/css 来克服这个问题？

4

7 回答 7

26

遗憾的是，如果没有在 HTML 中添加一堆无关的类选择器，这是不可能的。

我建议您设计您的网站，以便您的完全有效的 CSS 适用于使用现代浏览器的人，并且它仍然可以在 IE6 中使用，尽管在视觉上不太正确。您只需要在让您的网站达到标准和为不会升级的用户向后弯曲之间找到适当的平衡。这是一个坏掉的浏览器，这样对待它。

于 2009-03-16T06:00:07.523 回答
20

由于 IE6 本质上仅限于：

  • 类选择器
  • ID 选择器
  • （空格）后代选择器
  • a:-only 伪选择器

您唯一的选择是：

  • 使用更多类来识别您的元素
  • 使用 JavaScript（强烈不推荐，除非在高度专业化的情况下）

我发现通过用空格分隔多个类来为一个元素分配多个类的能力非常有用：class="foo bar"

于 2009-03-16T05:18:01.213 回答
8

如果你想在 IE6 中使用属性选择器，你可以使用 Dean Edward IE.js。 http://dean.edwards.name/IE7/

这将使 IE 5+ 的行为更像 IE7

支持以下 CSS 选择器：
父母 > 孩子
相邻+兄弟
相邻~兄弟
[attr]、[attr="value"]、[attr~="value"] 等
.multiple.classes（修复错误）
:hover, :active, :focus （适用于所有元素）
:first-child, :last-child, 独生子, nth-child, nth-last-child
：检查，：禁用，：启用
:empty, :contains(), :not()
：之前/：之后/内容：
:lang()

我没有 IE6（使用 IE7）所以我不能说它有效，但试一试

于 2009-03-16T06:21:51.417 回答
6

您可以将 Internet Explorer CSS 表达式与安全下划线（“_”、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 hack 让您感到害怕，请阅读Safe CSS Hacks。

以上可以改成：

.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]-->
于 2011-11-22T18:12:42.663 回答
5

Dean Edwards 的IE7 JavaScript 库为 IE 5 和 6提供属性选择器支持。

于 2009-03-16T06:17:09.837 回答
2

遗憾的是，使用类，这是唯一的解决方法。

于 2009-03-16T05:19:01.850 回答
0

如果您在您的网站上使用 jQuery，另一个选项是SuperSelectors - 它通过您网站的样式表，动态地向元素添加类，这样即使 IE6 也可以沐浴在正确支持 CSS 选择器（如ul li:first-child li:nth-child(odd) a:hover.

于 2009-04-21T19:53:26.017 回答