The Power Of ZOOM - Fixing CSS Issues In Internet Explorer

The Power Of ZOOM - Fixing CSS Issues In Internet Explorer

Posted September 18, 2008 at 9:02 AM

Tags:  HTML / CSS

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. For a more in depth look at what it means for an element to hasLayout,  click here .

 

This article comes from: http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm