CSS hack for IE6 and IE7
Posted in CSS, Internet Explorer on March 2, 2008 by BalaEveryone know what a underscore hack is, but it fails in IE. Before getting into the Underscore hack, we need to know how it works,
If a property say height is prefixed with _ or - IE6 will assume that as a valid property but FF will ignore it, so for any IE6 specific style we can use _ or -. But in IE7 that bug was fixed, so if any property is followed by _ or -, IE7 will ignore it similar to Firefox.
Dont lose, still IE is not that robust, if you place a ‘*’ before the property, it considers, now that is something to smile about and thinking deeper. So if a property is prefixed by a *, it will be considered as a valid property, but we can a small problem here, even IE6 will take this as a valid one. So summing up everything we have
|
|
* |
_ or - |
|
Firefox |
Invalid |
Invalid |
|
IE6 |
Valid |
Valid |
|
IE7 |
Valid |
Invalid |
Analyzing the above table, if we want something specific to IE 7, then it should be prefixed with * and considering the fact that IE6 will also understand that, we must override that for IE6. We can override that with _ or - property. So here is the solution,
- Define a property for Firefox - normal manner
- Define the same property for IE7 with * Prefix
- Define the complementary property (margin left and margin right) for IE6
Deciding the complementary property needs some amount of logical input. So for example, for a margin issue, this is what we gona have.
- For Firefox, margin-right: 10px;
- For IE6, _margin-left: 8px;
- For IE7, *margin-right: 2px;
That is all we need to do. Now we will see the same in all the brwosers, this is pretty ugly hack, but we dont have a better solution ![]()