Question

Does !important not works in IE6 ? If we need IE6 compatibility too then shouldn’t we use !important?

Answer 1

IE6 supports !important when the rule with !important is the last rule for that property within a selector.

This sounds a little confusing, but if you declare an !important height, it must be the last declaration for ‘height’ within a given selector.

As such consider these examples:

#selector { height: 100px; height: 150px !important; }
Result: All browsers: 150px;

#selector { height: 100px; height: 150px !important; }
td#selector { height: 200px; }
Result: All browsers: 150px;

#selector { height: 100px; height: 150px; }
td#selector { height: 70px; height: 200px !important; }
Result: All browsers: 200px;

#selector { height: 100px !important; height: 150px; }
Result: All modern browsers but ie6: 100px; ie6: 150px;

#selector { height: 100px !important; height: 150px; }
td#selector { height: 200px; }
Result: All modern browsers but ie6: 100px; ie6: 200px;

#selector { height: 100px; height: 150px; }
td#selector { height: 70px !important; height: 200px; }
Result: All modern browsers but ie6: 70px; ie6: 200px;

What ie6 does is parse the ‘height’ value for each selector as the last ‘height’ declaration present within the selector (other rules may apply but I believe this is your standard case). Then it selects the most specific ‘height’ out of all of these based on !important and selector specificity rules. It effectively ignores the ‘height’ declarations that are not the last within their selector.

Other browsers instead will take into account ‘!important’ when parsing the ‘height’ value for each selector, before comparing selectors based on !important and specificity rules.

One “benefit” of this is that every other reasonable browser will use your “important” style, while ie6 will pick the last rule declaration within that selector.

You would be much better off with an ie6 specific stylesheet though unless there is only a very small number of ie6 tweaks and you want to css comment each one as an ie6 exploit.

Mental Example

Imagine picking a CSS rule is a matter of 1) getting all the rules that match the element and 2) deciding which of those rules to use. Pretend the inline style tag is just another selector unless I mention otherwise.

In every other browser if you want to get the ‘height’ for an element it does this approximately:

1. For each selector choose the last !important height if there is one, otherwise just the last height.

2. Pick the most specific selector where the selected ‘height’ is an !important height, otherwise the inline style height, otherwise the most specific selector.

In ie6 it does this approximately:

1. For each selector choose the last height.

2. Pick the most specific selector where the selected ‘height’ is an !important height, otherwise the inline style height, otherwise the most specific selector.