9

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?

Josh Lee
  • 171,072
  • 38
  • 269
  • 275
Kyle
  • 21,377
  • 37
  • 113
  • 200

5 Answers5

17

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 3
    You can mitigate any downsides by using conditional comments to only serve the `zoom` rule to IE-7-or-lower. (IE8's layout engine works differently and tends not exhibit the same sort of problems.) – bobince May 06 '10 at 20:54
1

As of November 2012, it is ever more likely that zoom will someday become valid CSS, although it seems that using it in the above context should not have any negative side-effects.

See: http://dev.w3.org/csswg/css-device-adapt/ or http://www.w3.org/TR/css-device-adapt/

Jon-Paul
  • 11
  • 1
1

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

arxpoetica
  • 4,841
  • 3
  • 30
  • 35
0

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.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • 1
    Zoom is now also supported by Chrome and Safari, according to this site: http://css-tricks.com/almanac/properties/z/zoom/ – thenickdude Sep 21 '13 at 15:19
0

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.

egrunin
  • 24,650
  • 8
  • 50
  • 93
reisio
  • 3,242
  • 1
  • 23
  • 17