Search code examples
csscross-browserhaslayout

Is it okay to use zoom:1 in my css classes?


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?


Solution

  • 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.