[英]How to workaround: IE6 does not support CSS “attribute” selectors
遗憾的是,如果不使用一堆无关的类选择器来编写HTML,这是不可能的。
我建议你设计你的网站,以便你的完全有效的CSS适用于使用现代浏览器的人,并且它仍然可以在IE6中使用,尽管在视觉上不太正确。 您只需要在让您的网站升级到标准之间找到适当的平衡,并为不升级的用户向后弯腰。 这是一个破碎的浏览器,对待它。
由于IE6基本上仅限于:
你唯一的选择是:
我发现利用通过用空格分隔多个类来为元素分配多个类的能力非常有用: 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.