This link has been bookmarked by 48 people . It was first bookmarked on 25 Jun 2008, by someone privately.
-
31 Jan 13
-
22 Mar 12
-
12 Mar 12
-
23 Dec 11
-
13 Nov 11
-
27 Sep 11
-
15 Jan 11
-
29 Sep 10
-
16 Sep 10
-
16 Aug 10
-
In order to accommodate these two different concepts, the rendering engine makes use of a property called
hasLayoutthat can have the valuestrueorfalsefor the element concerned -
-
When an element has a layout, it is responsible for sizing and positioning itself and possibly any descendant elements.2 In simple terms, this means that the element takes more care of itself and its contents, instead of relying on an ancestor element to do all the work. Therefore, some elements will have a layout by default, though the majority do not.
-
bodyandhtml(in standards mode)table,tr,th,tdimghrinput,button,file,select,textarea,fieldsetmarqueeframeset,frame,iframeobjects,applets,embed
Elements that are responsible for arranging their own contents will have a layout by default, and include the following (this list is not exhaustive):
-
The main reasons Microsoft gives for the fact that not all elements have a layout by default are “performance and simplicity.” If all elements had a layout by default, a detrimental effect on performance and memory usage would result.
-
For example, when an element, such as a
div, that doesn’t have a layout by default, contains floated or absolutely positioned content, it will often exhibit strange and buggy behavior. -
If you notice that a piece of your content appears and disappears, and sections of the page only get half-drawn, these are good indications that an element requires a layout.
-
In fact, 99% of the Internet Explorer CSS bugs you encounter on a daily basis can be fixed using a
hasLayoutfix in the correct place. AhasLayoutfix involves nothing more than declaring a CSS property that causes an element to gain a layout, when it wouldn’t ordinarily have a layout by default. -
there are several other CSS properties that, when you apply them to the element, will cause that element to gain a layout.
-
display:inline-blockheight: (any value exceptauto)float: (leftorright)position:absolutewidth: (any value exceptauto)writing-mode:tb-rlzoom: (any value exceptnormal)4
Those other properties are:
-
- Children of absolutely positioned or floated elements will not shrink to wrap their content when the child has a layout.
- Static content positioned next to a float will not wrap around the float, but will instead form a rectangular block to the side of the float.
It’s not a good idea to give all elements a layout—not just because of the performance and memory issues already mentioned, but because a number of other unwanted CSS side effects will occur. For example:
-
If this parent element contains floated or absolute elements, it’s likely to be the one causing the problem; the problems are likely to exist because it’s not taking proper care of its child elements.
-
If you set the property on an element, and the issue is resolved, you know you’re on the right track.
-
Once you have found the element that’s causing the problem, you can apply the necessary fix. The preferred approach is to set one or more dimensional CSS properties on the element. However, if dimensions can’t be applied normally, a workaround must be employed.
-
-
23 Jul 10
-
08 Jun 10
-
07 Jun 10
-
07 Apr 10
-
09 Feb 10
-
21 Dec 09
-
13 Dec 09
-
16 Nov 09
P eterIn fact, 99% of the Internet Explorer CSS bugs you encounter on a daily basis can be fixed using a hasLayout fix in the correct place. A hasLayout fix involves nothing more than declaring a CSS property that causes an element to gain a layout, when it wou
-
27 Oct 09
-
27 Aug 09
-
01 Aug 09
-
22 Jun 09
-
02 May 09
-
24 Apr 09
-
20 Mar 09
-
16 Feb 09
-
25 Jul 08
-
26 Jun 08
-
25 Jun 08
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.