Update: note that this article is from 2003. The CSS hack described is outdated and shouldn’t be used.

I learned another CSS hack today – the underscore hack. You can read all about it in detail, but in essence it’s very simple.

Browsers are supposed to simply ignore CSS properties that they don’t understand. This much should be obvious. However, IE/Win does its usual trick of trying too hard to cope with user error and will read and process any valid CSS property with an underscore tacked on to the front. All other browsers will ignore the mystery property. Example:

p{ color: black; _color: blue; }

All browsers save IE/Win will display the paragraph text as black – IE/Win displays it as blue. It reads the _color property and allows it to replace the one that came before.

I discovered this technique whilst looking for a solution to IE’s lack of support for min-height to specify the minimum height of an object. Decent browsers like Mozilla support this property, but IE doesn’t. Thanks to another IE bug (one that results in overflow being treated strangely), it’s possible to set a minimum height for both IE and proper browsers in a fashion such as this:

div#content{ height: auto; min-height: 400px; _height: 400px;
}

Not a new technique, but new to me, and helped me out of a layout problem. Be sure to read Simon’s discussion of the pros and cons. With the appropriate care, it’s a useful tool to add to your hack list.