Whenever I find IE is displaying my website weird (different from chrome and firefox), I try putting a zoom:1 in the css class for the part that is being displayed weird. A lot of the time this fixes the problem and makes it look consistent with the other browsers.
Is it a problem to use zoom:1? I know my CSS won't validate, but are there any real world problems that can arise if I rely too much on using zoom:1?
The problem you are fighting with this is the IE hasLayout issue. Here is a good article and overview on which properties also trigger "having Layout" in IE.
I know of no side-effects to zoom: 1 except that it's not W3C valid. I'm pretty sure I'm using it myself in some projects.
However, there is of course the remote chance that zoom becomes a real CSS property one day - or gets used in another proprietary context like on the iPad or whatever - which could lead to things breaking.
A really clean solution, zoom is not. If at all possible, it's a good idea to give the element "Layout" in some other way as outlined in the article.
zoom is only supported by IE, so not at the moment. Potentially there could be a future property called zoom which could mess things up, but this is unlikely due to widespread usage.
display: inline-block; does the same thing, but is standard code.
In the rare case it creates a problem, you can use
display: block !important; /* or inline, etc. */
display: inline-block; /* in this order */
to send it only to the ancient versions of Internet Explorer for which it's useful.
To the contrary, there are definitive downsides to using zoom:1, even in IE. Usually, I only include it in IE-only stylesheets, but even in the past few days I've wrestled with some layout issues because I opted to use *{zoom:1;}
-- the takeaway -- use it on a limited basis. If you only care about IE7+, you can use min-height: 1%, which has the same effect of triggering hasLayout