CSS ZOOM – Yet Another IE quirk; The 3 pixel shift
Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum, that doesn’t seem to have a fix . Just such a one is this issue in IE7.
Problem Statement:
I and so might many of the other serious web developers have noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right. I have tried to google solutions for this issue , but have hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening) , hence I have never found a clear solution to the problem either…
Possible Solution :
Out of experience , I have notice 90% percent of the times i.e. , that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …
#somediv {
zoom: 1 ;
}
again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…
The zoom property is also seems to supported by Chrome , but its use dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t, bookmark this page under “CSS craps”
Subscribe to by Email









































March 7th, 2010 at 6:17 am
Hey, I came in from Google. Booked, thanks.
April 19th, 2011 at 1:30 pm
zoom:1 also helps when you have problems with “disappearing” divs in IE7 which have position property set to ‘relative’ – just like you said – in 90% of the times.