Tackling the IE factor - IE7 update

Written October 4. 2006, at 09:44 GMT.

Since I first wrote about tackling the IE factor (if you haven't read it yet, then do so now), over two and a half years ago, a few things have changed:

• IE 5.x on the Macintosh is hardly an issue any more - which is a big relief because that browser was a pain to beat into shape and the old .classname-ie5mac selector hack always seemed a tad too ugly for my taste.
• IE5.0 on Windows usage has also dropped dramatically, but since the _propertyname /**/: value;hack is relatively tidy, I still tend to use it - out of habit.
• IE7 has appeared on the horizon (currently in RC1).

Although a lot of things have changed for the better between version 6 and 7, IE7 is still built on the old "Trident" rendering engine written for IE5, and therefore remains an inherently severly broken browser. (More info: Old Bugs For New and Is catching up good enough?)

IE7 still hangs on to the "hasLayout" concept which is the cause of an amazing number of CSS rendering bugs.

The popular _height:0; hasLayout hack that was commonly used to whip IE6 into shape, doesn't work in IE7. Fortunately the harmless min-height:0;rule accomplishes much the same result.

So I have found that blindly replacing all instances of

_height:0; /* IE hasLayout fix */

with

_height:0; min-height:0; /* IE hasLayout fix */

makes about 95% of IE7's CSS rendering bugs disappear. *Poof*

The remaining 5% can then be addressed trough one of the following methods:

1. by using a seperate IE7-fix stylesheet <link /> included with Mircosoft's conditional comments

2. with an all-inclusive (IE5, IE6 and IE7) "tilda-hack" like this:

   div { 
     color : green; /* all browsers */
     ~color : red; /* IE5-7/Win only */
   }
   

3. with an easy IE7-specific inline hack of the form:

   *:first-child+html { /* IE7-specific rules */ }
   

P.S. Note that The Underscore Hack is valid CSS - even though W3C's validator says otherwise - whereas the "tilda hack" unfortunately isn't.

---

More like this: English Entries, HTML/CSS, Hugbúnaður.