Categories
Technology

IE empty div has height

If you are scratching your head wondering why an empty DIV in IE has height, or why the height you specified for a DIV in IE does not come out as expected, here are the possible solutions:

font-size: 0;

line-height: 0;

undo zoom: 1;

Although you can use zoom: 1 to trigger hasLayout, if this is applied to an empty DIV, it will take up space even if it is empty. If you want an empty DIV to disappear, undo the zoom: 1; on it.

It literally took me weeks to finally figured out why the stupid empty DIV in my design kept taking up space. It was not possible to set the font-size or line-height to zero because sometimes the DIV had text in it. I finally figured out that it was because I accidentally did a mass assignment of

div { zoom: 1 }