Recently I’ve been doing a lot of cross-browser work (IE 6 + 7, FF and Safari required to function similarly, unfortunately), and I’ve narrowed down my list of hacks/tricks to make Internet Explorer be able to actually render standards-compliant HTML in a manner remotely befitting a modern browser. Here are my list of “go-to” hacks which seem to fix at least 90% of rendering, layout and positioning issues in IE(6|7).

Napoleon Syndrome

Apparently Internet Explorer has a problem with its height. All too often, it needs to be told how tall a block element is just to render it remotely properly. Personally I like to tease IE with the fact, taunting it about its height issues by applying the smallest height property I can. The fix here is just to apply:

height: 1%;

to block elements that are having trouble rendering properly (or at all) and they seem to come back to life. This is generally referred to as the “Holly Hack” (look for that title). You may also choose to assign a specific pixel height or something else more indicative, but I don’t like to give IE the satisfaction of making me figure that out.

Put IE in position

You’d be surprised how many floating/positioning problems can be fixed by simply adding

position: relative;

to a CSS definition. Try it. It especially comes in handy when you’ve got overflow defined on some elements, as described by Jonathan Snook over at snook.ca (sexy site BTW).

Broken CSS Attribute Parsing is Your Friend!

The last pair of hacks come care of Internet Exploder’s broken CSS parsing, which does/doesn’t recognize certain attributes, despite their invalid definition. I specifically like the way that this brokenness can be “stacked” to achieve different results in different browsers. An example:

#crazy-div {
position: relative;
left: 0px;
_left: 100px;
*left: 200px;
}

What’s up with all the * and _ business you ask? Well it turns out that those characters are basically ignored by IE, so it will take those rules into account, even though Real Browsers won’t. So that set of rules goes something like this:

1. position: relative; everyone understands and applies this.
2. left: 0px; all browsers get this as well, so it’s applied across the board.
3. _left: 200px; This is the Underscore Hack, which IE 5+ will render properly (IE 7 managed to fix this one), so IE 5 + 6 will move #crazy-div over 100px.
4. *left: 100px; Internet Explorer 7 (only) will ignore the asterisk and render this rule, so #crazy-div will be shifted 200px.

So there you have a decent way to get a set of rules in place that will allow you to target certain (lame) browsers and fix up some of their rendering and positioning problems. I’m sorry that you’ll need to use these hacks, but the Internet is a messy place 🙂