2005-02-25

The !important qualifier Hack for IE.

Note. After second thought, it's more likely to be a bug rather than a hack, but I still keep this post alive in order to let more guys know about the tissue.

In some general cases, the !important qualifier works well in IE. For example, there is a P element.

<p class="foo">This is a paragraph.</p>

And have the following style applied on it, the !important qualifier works just well.

p.foo {
 color: red !important;
}
p.foo {
 color: navy;
}

This will result in a red colour of text due to a higher cascading order. However, it is found that if we combine the above styles into one...

p.foo {
 color: red !important;
 color: navy;
}

IE/Win will simply ignore the !important rule and apply a color of navy on the paragraph.

So here comes a hack - we can use this trick to hide some styles. The only disadvantage I can see is the disturbed cascading order. This may cause problems in style sheet which is full of overridding.

Currently tested on IE6/Win. A same behavior expected on other versions of IE/Win. But I can't test on IE/Mac as I haven't owned a Mac. Thus I sincerely ask for a Mac user to test it for me. Thanks.

No comments: