November 18, 2005
A bug that had plagued my own Web site since the 5.0 redesign surfaced when I rewrote the company site: Every once in a while, Internet Explorer would just fail to show the page's content. Which is kind of a problem, y'know.
Basically, it boils down to the fact that IE is broken. The fix, for those that care, is to exploit three more bugs.
/* \*/
* html div {height: 1px;}
/* */
This gibberish that I found on the Web today is what keeps me from driving to Redmond, because it actually works. Basically, IE chokes when the CSS layout gets too complex, because things don't have explicit heights. This is a problem, because things like paragraphs can't have defined heights.
But then the first bug comes along and helps us out. IE gets the height command wrong. If I assign something a height, it's that tall no matter what. IE just treats it as min-height, which sets a minimum then lets the contents run as long as they want. So setting the height to 1 pixel doesn't really do anything. In IE. Every other browser would see that and show you, at best, the very tops of capital letters.
So then we exploit another of IE's bugs, this time in its CSS reading code. The first /* opens a comment. The \*/ that follows it doesn't close the comment in non-IE browsers but does in IE. So only IE pays attention to the next line, which is where we work our voodoo. The /* */ after the hack just gets every browser back on the same page, so to speak.
But now we have another problem. Mac/IE doesn't have the original bug so we don't want it to see our hack. But it also has that flawed reading code. But it doesn't have IE's last bug, that we can now use to restrict our hack to only Win/IE. * html cannot possibly match anything, because <html> has no parent element. Thus the statement is invalid. Win/IE doesn't care, though, so it happily applies the rule. Mac/IE at least has the good sense to ignore the impossible, so only our true target gets the hack.
Two wrongs don't make a right. As you can see, it actually takes three.
