The Power Of ZOOM – Fixing CSS Issues In Internet Explorer

posted in: Css | 0

Summary:

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.

Reference Site : http://www.satzansatz.de/cssd/onhavinglayout.html

Previous Post
Next Post

Leave a Reply