div Height: 0 problem in IE

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?

From stackoverflow

• Have you tried using "easy clearing" (or "clearfix") for markup-less clearing. It's usually much simpler:

  http://oncemade.com/renaming-and-extending-easy-clearing-aka-clearfix/

  meo : this technique uses CSS Hacks for IE this makes the the CSS unvalid :/

  RoToRa : No, it doesn't. It takes advantage of IE's CSS bugs, but nothing of it is invalid CSS.

• Using empty DIVs to aid presentation is generally bad practice. You might consider changing the CSS of the elements you to clear. A lot of the time clearing can be replaced by the use off inline-block. See http://google.co.uk/notebook/public/06909424369135510368/BDROpQwoQ4-fhwfsj#SDRZLQgoQtfHkwfsj.

  Rich

  meo : i know that it is a bad practice, i have not done the site, i just have to solve this problem.

  kim3er : Fair enough, I know that pain all too well.

• It's a IE font problem.

  Add

  font-size: 0;
  

  to your css declaration

  meo : thx for that. this was the problem