繁体   English   中英

如何解决:IE6不支持CSS“属性”选择器

[英]How to workaround: IE6 does not support CSS “attribute” selectors

我工作的其中一个项目使用CSS“属性”选择器[att]

CSS选择器

ie6不支持:IE6中支持CSS选择器 (查找文本“属性选择器”)

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

遗憾的是,如果不使用一堆无关的类选择器来编写HTML,这是不可能的。

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

由于IE6基本上仅限于:

  • 类选择器
  • ID选择器
  • (空间)后代选择器
  • a: - 只有伪选择器

你唯一的选择是:

  • 使用更多类来标识您的元素
  • 使用JavaScript( 强烈不推荐,除非在高度专业化的情况下)

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

如果你想在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)所以我不能说它有用,但试一试

您可以使用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破解了你,请阅读有关安全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]-->

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

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

如果你在你的网站上使用jQuery,另一个选择是SuperSelectors - 它通过你网站的样式表,动态地向元素添加类,这样即使是IE6也可以充分利用正确支持CSS选择器的光芒,比如ul li:first-child li:nth-child(odd) a:hover

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM