How to Workaround: IE6 Does Not Support CSS "Attribute" Selectors

How to workaround: IE6 does not support CSS attribute selectors

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"

How do you work around IE not supporting :after?

1. Use the IE7.js hack to add after pseudoelement support.
2. Use conditional comments to add to the markup to simulate that effect or to remove some of the existing style to make it easier to read without dividers -- eg, let the list items stack in a stylesheet in a conditional comment
3. Allow IE6 to degrade gracefully by rearranging the style so this doesn't happen, even if it looks different in other browsers.

CSS selector for disabled input type=submit

Does that work in IE6?

No, IE6 does not support attribute selectors at all, cf. CSS Compatibility and Internet Explorer.

You might find How to workaround: IE6 does not support CSS “attribute” selectors worth the read.

---

EDIT
If you are to ignore IE6, you could do (CSS2.1):

input[type=submit][disabled=disabled],
button[disabled=disabled] {
    ...
}

CSS3 (IE9+):

input[type=submit]:disabled,
button:disabled {
    ...
}

You can substitute [disabled=disabled] (attribute value) with [disabled] (attribute presence).

CSS :before/:after Selectors in IE 6,7

of course jQueries before and after

what else ;)

List of CSS features not supported by IE6

IE6 has LOTS of CSS bugs so that will be contributing to your page rendering. The official list of what is and isn't supported is here.

What might also help you is positioniseverything.net, they have a comprehensive list of IE bugs and their fixes.

If you're still struggling to get it right post a link to your page.

Unobstrusive pseudo-classes and attribute selectors emulation in IE

I found this lovely piece of software:

• ie-css3.js CSS3 pseudo-class selector emulation for Internet Explorer 5.5 - 8

It basically covers my requirements (unobtrusive code that doesn't require specific CSS rules), although it doesn't emulate input[type=text].

If you know about something else on this line, feel free to add a new answer.

What is the best way to fix CSS issues in IE6 - with javascript?

You can use this library if you want to do it with JavaScript:

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

There is also CSS3Pie, which adds CSS3 support to browsers:

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Also have a look at Progressive Enhancement and Graceful Degradation for a design philosophy.

How can I force Internet Explorer to apply CSS styles

There are various hack-y ways to force re-rendering. script.aculo.us has a method called forceRerendering (naturally) that looks like this:

someElement.appendChild(document.createTextNode(' '));
someElement.removeChild(someElement.lastChild);

That ought to work in this case, too.

---

Related Topics