Triggering haslayout in IE 6, what's the side effect of using * html div { height: 1%; }

Question

For a while, I've been putting * html div { zoom: 1; } in my base stylesheet, and it has worked great. However, I now run into situations where there're elements that are absolute positioned that are losing their heights and widths in IE 6 cuz of this. So I'm thinking of putting * html div { height: 1%; } instead, but what are the side effects?

Update:

Thanks for all your responses. The answer is most probably no side effects as all of you said.

I will however have to disagree with all your recommendations (at this given moment) about how/when to trigger haslayout. I see haslayout a desirable behaviour and should therefore be a default behaviour in IE6 (& 7).

It's been mentioned that it's unlikely there would be any side effects, for the exact reason, why not make it a default behaviour and only turn it off when an undesirable behaviour (if ever) occurs.

One can do this by specifying {zoom: auto;} or {height:auto;} on that specific element depending on how it was defined in the base stylesheet.

I will have to give the answer to the first person that said "no side effects" since everyone's answer is the same, while some went out of scope. Thanks again!

Answer 1

I try to minimize the use of these kinds of workarounds to avoid unforeseen problems; I only use it on the elements that need it when IE6 breaks a lay-out, never on all elements in a page.

Answer 2

This is known as The Holly Hack. As far as I know, there isn't a side effect, especially if you * html it for IE6 directly. I agree with the other posters that placing it on the <div> tag may not be the wisest choice - I'd target the individual elements that are causing grief.

Answer 3

A 1% height should have no effect because IE treats dimensions as min-dimensions really. However pos:abs is enough to give haslayout anyway and I agree with jeroen that blanket assertions like this are not wise. This is not something you want in a CSS reset for example.

Answer 4

I also don't think there are any side effects. But as mentioned - only use it on what you need to. I'd personally...

1. Use it only on a set class:

   • html .haslayout { height: 1%; }

2. Place it in an IE 6 stylesheet included via a conditional comment

   <!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" media="screen,projection" /> <![endif]-->

Hope that helps