打印

RS8003: IE6 IE7(Q) IE8(Q) 不支持属性选择器

作者:武利剑

标准参考

关于属性选择器

选择拥有指定属性的元素。

属性选择器有以下四种方式:

  • [att]:选定设置了 att 属性的元素,不管设定的值是什么
  • [att=val]:选定 att 属性的值设置为 val 的元素
  • [att~=val]:表示一个元素拥有属性 att ,并且该属性含有空格分隔的一组值,其中之一为 'val'
  • [att|=val]:表示一个元素拥有属性 att ,并且该属性含 'val' 或以 'val-' 开头

关于属性选择器的详细信息,请参考 CSS2.1 规范 5.8 Attribute selectors 中的内容。

问题描述

CSS 2.1 规范中描述的若干种选择器,在 CSS 1 历史规范中均无规定,这导致早期版本的浏览器,如: IE6 IE7(Q) IE8(Q) 不支持属性选择器。

造成的影响

当使用了属性选择器后,可能会使页面在 IE6 IE7(Q) IE8(Q) 中的无法得到预期效果,因而跟其他浏览器产生差异。

受影响的浏览器

IE6 IE7 IE8  

问题分析

对于此问题,我们通过以下的测试用例来说明。

分析以下代码:

<style type="text/css">
  p[id] {
    color: red;
  }
</style>
<p id="aloha">Aloha!</p>
  • 样式中使用了属性选择器 [att]:p[id]
  • 含有 'id' 属性的 P 元素将被选中;

根据 CSS2.1 规范中的描述可知,文本 'Aloha!' 将被置成红色。

这段代码在不同的浏览器环境中的表现:

IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Opera Safari Chrome

所以对于属性选择器的支持情况,如下表:

IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Safari Opera Chrome
N Y

【注】:实际中其他除常用 HTML 标记同样适用此例,并非仅 P 标记自身不支持,此文中不在一一测试证明。

解决方案

避免在 IE6 IE7(Q) IE8(Q) 中使用属性选择器。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.3
Chrome 6.0.437.3 dev
Safari 5.0
Opera 10.60
测试页面: attribute_selectors.html
本文更新时间: 2010-07-30

关键字

selector IE 属性选择器