可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

One of the projects which I am working uses CSS "attribute" selector [att]

CSS Selectors

which is not supported by ie6: Support for CSS selectors in IE6 (look for text "Attribute Selectors")

Is there any workaround/hack which is of course valid html/css to overcome this problem?

回答1:

Since IE6 is essentially limited to:

class selectors
ID selectors
(space) descendant selectors
a:-only pseudo-selectors

your only options are:

Use more classes to identify your elements
Use JavaScript (strongly not recommended except in highly specialized cases)

I find it very helpful to take advantage of the ability to assign multiple classes to an element by separating them with a space: class="foo bar"

回答2:

This isn't possible without peppering your HTML with a stack of extraneous class selectors, sadly.

I'd recommend designing your site so that your entirely valid CSS works for people using modern browsers, and that it's still usable in the IE6, albeit visually not quite right. You just have to find the right balance between getting your site up to standard and bending over backwards for users who won't upgrade. It's a broken browser, treat it as such.

回答3:

If you want attribute selector in IE6, you can use Dean Edward IE.js. http://dean.edwards.name/IE7/

That will make IE 5+ behave much more like 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()

I didn't have IE6 (use IE7) so i can't said it worked, but give it a try

回答4:

You can use Internet Explorer CSS expressions combined with the safe underscore ("_", IE6 and earlier) 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;
}

I do understand, that you did ask for "valid" CSS, but if the CSS hack above freaks you out, please read about Safe CSS Hacks.

The above could be changed to:

.ie6 abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

That is if your HTML began as:

<!--[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]-->

回答5:

Dean Edwards' IE7 JavaScript library provides attribute selector support for IE 5 and 6.

回答6:

Use classes, that's the only workaround, sadly.

回答7:

If you're using jQuery on your site, another option is SuperSelectors - it goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.