div Height: 0 problem in IE

Question

to clear: both my content i use this:

CSS:

.clr {
  clear: both;
  height: 0; /* i have tried 0.001em to */
  line-height: .001em;
  overflow: hidden;
}

HTML:

<div class="clr">&nbsp;</div>

it works perfectly in every navigator. But in IE 7 & 8 the div still have a height of a few pixels. How can i avoid this?

Answer 1

It's a IE font problem.

Add

font-size: 0;

to your css declaration

Answer 2

Just coming across this and the answer Ben gave makes sense but it was incomplete in dec of 2011 on IE 7 (legacy support necessitates this.

font-size:0; is a good start but didn't initially do it for me.

Along this line of thought, you need to be mindful of line-height. If you set line-height higher up in the DOM, likely due to the nature of these things, it get inherited ( as was happening to me )

If you have set line-height on a parent, be sure to set it explicitly on the child you are trying to use to force the clear:

font-size:0;
line-height:0;

-Brandt