The Power Of ZOOM – Fixing CSS Issues In Internet Explorer

From the blog:

The Power Of ZOOM – Fixing CSS Issues In Internet Explorer

I think we’ve all experienced how frustrating it can be to do cross-browser testing with CSS-based web sites. Why is it that Internet Explorer (IE) never seems to play nicely with good, solid CSS markup?!? Anyway, I just thought I’d share one technique that I’ve found to be extremely helpful. When I have some CSS that just won’t work in IE, I see if adding a ZOOM property of 1 (one) will help:

div {
    zoom: 1 ;

I have to say, 90% of the time, this fixes the display issues that I am having in IE… and, it does so without adversely affecting any of the other browsers (that I have tested). I guess you could call this an IE-hack since I believe the zoom property is only supported by Internet Explorer.

I am not exactly sure why this works, but it has something to do with what you are trying to accomplish and the concept of an element having a “layout”. In IE, some elements have a “hasLayout” property that is true by default. This is required for many visual settings; for example, an alpha filter only works on an element that hasLayout. So, why does {Zoom:1} work? It gives the target elements the hasLayout property.

There’s a bunch of other things you can do to fix rendering issues in IE, but I have found {zoom:1} to be the lowest hanging fruit.

~ by WPA Staff on May 18, 2012.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: