PDA

View Full Version : About css "zoom"


GalaxySong
05-23-2007, 02:32 AM
I followed the example "Toolbar with Menus" in Ext Doc and made a simple js class/constructor named "RoundBox", using css file "box.css", as a ui widget. It worked very well in a few tests. But now I get some trouble in IE. If the container of the box is set "width: auto", show it and alignTo "t-t", its right side reaches the end of the screen/view(see the attachment) in spite of its very short content.

I don't exactly know why but I have found a work around:
.x-box-tl, .x-box-ml, .x-box-mc h3, .x-box-bl {
zoom: normal;
}
It seems that IE will wieldly stretch it when "zoom: 1" although it is supposed to behave as "zoom: normal".
And I also happened to know that if you set "zoom: 1" and "filter:opacity(...)", the text of that element will look like blurred.
Then, I wonder, why not just use "zoom: normal" instead of "zoom: 1" to play safe?

jack.slocum
05-23-2007, 10:31 AM
zoom:1 triggers hasLayout in IE. Search google for "hasLayout in IE" to get a better understanding of what is going on.

GalaxySong
05-23-2007, 10:14 PM
zoom:1 triggers hasLayout in IE. Search google for "hasLayout in IE" to get a better understanding of what is going on.
I see. Then what shall I do about my problem? Will my work around be OK?
In http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp, I get:
There are also auto-sizing side effects: an element with layout cannot "shrink to fit" its children, so for example an absolute positioned box around an element with layout does not shrink to fit the layout element's children.
Does that mean I cannot set "width: auto" when hasLayout is on?

jack.slocum
05-24-2007, 10:55 PM
This is a nightmare bug in IE that everyone has to work around (there are countless workarounds in Ext). The problem is not just that if the element hasLayout=true it won't shrink-wrap but if any children hasLayout=true it still won't shrink-wrap. There are many ways to trigger hasLayout including setting a height, float or zoom.

GalaxySong
05-30-2007, 10:28 PM
Thanks.
I am tired of this problem and just set a fixed width.