A New Way to Trigger hasLayout on Elements in Older Versions of IE?

In every browser except IE6 and IE7, the above box should appear just fine with its gradient background. In IE6 and IE7, it looks like this:

Background missing in IE6/7

You can see this happen if you view the page in IE9 and change the Document Mode to “IE7 Standards” in IE9’s developer bar.

The problem occurs because, according to IE6 and IE7’s weird rendering engines, the element does not “have layout” . One of the most common ways to quickly fix this issue in the problematic versions of IE is to use zoom: 1. But there are other ways to give an element layout. SitePoint’s reference lists a number of the CSS properties that will give layout to an element in those browsers. Most of them are undesirable because they change the way the element behaves (for example, you could float the element, position it absolutely, etc.).

Then there’s the aforementioned “zoom” property and something called writing-mode. Both of those were originally IE-only proprietary properties. writing-mode is now part of the CSS3 spec, but the values that IE6 and IE7 understood are now deprecated. So between those two, the only option is zoom.

A New Solution: min-height

Due to the fact that IE6 usage has now dropped below 5%, many developers are now only really concerned with IE7. In that case, you can simply add a min-height value, and IE7 will fix the problem. I think min-height: 1% is reasonable.

If you need IE6 usage, then just do this:

.haz-layout {
  /* CSS3 gradients and MS filters go here... */
  height: 1%;
  min-height: 1%;
}

IE6 treats the height property somewhat like min-height, so that will give the element layout in both IE6 and IE7, and the box will still have the same flexibility without constraining its dimensions.

This might not be “new” to some people. But I honestly have never seen anyone use this as a customary method of given elements layout in IE6 and IE7.

Drawbacks? Of course!

The main drawback to this is that if you use height or min-height in this way, then you can’t use overflow: hidden or overflow: auto, because that will clip content or add scrollbars.

The other drawback? Well, it’s one more line of code than is needed when you use zoom and it still doesn’t really satisfy the purists because you’re using the proprietary filter anyhow, so what’s the big deal in using the proprietary zoom property?

Any Point Using it?

Honestly? Probably not. As mentioned, if you’re using IE proprietary filters, then you might as well use “zoom”, because they’re both invalid. But if it makes you feel better to use min-height, then consider it as another option–but keep in mind the clipping possibilities if you happen to add “overflow: hidden” or “overflow: auto”.