CSS learning: on have layout

Css

The original English text here:
Http://www.satzansatz.de/cssd/onhavinglayout.htm

The text of all the layout this word has not been translated, one by itself this word meaning is more, turn into what all feel awkward, and then it is also proprietary properties, so it can be understood. The level is limited, many places are the vague transliteration, found the error welcome message pointed out.

Quote a comment from Dean Edwards:
I recommend that every CSS designer and DOM scripter read this. Understanding "Layout" gives a huge insight into lots of the other IE bugs and idiosyncrasies.
(Dean Edwards)

Revised April 16:
Move this part of the quirks mode individually into an article.
Add: Edge trim.
Add: Shrink Surround (shrink-wrapping) phenomenon.

Revised May 17:
Rewrite this part of the element next to the floating element.
Partial section minor fixes: attributes, about inline-level elements, CSS hacks.
Reorganize the language of some chapters: definition, data, problems, analysis, clear floating and automatic scaling to fit the heights, absolutely positioned elements.

On having layout

In the revision of this article
Current version:Rev 7 2006–05–17
Revise history
Various language versions
Directory

Introduced

There are many strange rendering problems in Internet Explorer that can be addressed by giving them "layout". John Gallant and Holly Bergevin classify these issues as "dimension bugs (Dimensional bugs)", meaning that the bugs can be resolved by assigning a width or height to the corresponding element. This leads to a question about "layout": why does it change the rendering characteristics of elements, and why does it affect the relationships between elements? It was a very good question, but it was difficult to answer. In this article, we focus on the performance of this complex issue, the specific discussion and examples in one aspect, please refer to the relevant links in the article.

haslayout-definition

"Layout" is a ie/win private concept that determines how an element displays and constrains what it contains, how it interacts with other elements, how to respond to and pass application Event/user events, and so on.
This rendering feature can be triggered irreversibly by some CSS properties. Some HTML elements, by default, have "layout".
Microsoft developers think that elements should be able to have a "property" (this is a concept in object-oriented programming), so they use the haslayout, this rendering feature is in effect when the Haslayout is set to true.
Terms
When we say that an element "gets layout", or that an element "owns layout", we mean that its Microsoft proprietary attribute Haslayout is set to true for this purpose. A "layout element" can be an element that has a layout by default or an element that gets layout by setting some CSS properties.
The "No layout element" refers to elements that are not triggered by haslayout, such as a clean div element that is not set to a wide and high size, as a "no layout ancestor".
A method that assigns layout to an element that does not have layout by default includes setting a CSS property that triggers Haslayout = true. Refer to the default layout elements and the list of these properties. There is no way to set haslayout = False unless you remove CSS attributes that trigger Haslayout = True at the beginning.

All kinds of problems

Haslayout's problems, whether novice or veteran, may have been encountered by designers or programmers. Layout have unusual and unpredictable effects when displaying boxes, and sometimes even implicate their child elements.
Whether an element has "layout" may raise some of the following issues:
Many common floating bugs in IE.
An exception handling problem for some basic properties of the element itself.
The margin overlap (margin collapsing) problem between the container and its descendants.
Many of the problems that you encounter when working with lists.
The problem of locating deviation of background image.
Handles inconsistencies between browsers that are encountered when using scripts.

The list above is just a ballpark and not perfect. The following article will be as thorough as possible to describe the problems that are posed by "layout".

Where did Layout come from?

Unlike standard attributes, and unlike some browser private CSS properties, layout cannot be directly set through a CSS declaration. In other words, there is no "layout attribute" Such a thing, the element either itself automatically own layout, or the use of some CSS declarations quietly get layout.
Default layout element
The following elements should be layout by default:

Property

• The following CSS properties and values will let an element get layout:

Position:absolute
The inclusion blocks of an absolutely positioned element (containing block) often have problems in this respect.
Float:left|right
Because of the characteristics of the layout element, the floating model can have a lot of weird behavior.
Display:inline-block
It is often used when an inline-level element needs to be layout, which may also be the only effect of the CSS attribute--Let an element have layout. "Inline-block behavior" is achievable in IE, but very different: Ie/win:inline-block and Haslayout .
Width: Any value other than "Auto"
Many people encounter layout related problems occur, usually first try to use this to fix.
Height: Any value except "Auto"
height:1% is used in Holly Hack.
Zoom: Any value other than "normal" (MSDN)
Ms Proprietary properties that cannot pass checksums. However, zoom:1 can be used temporarily as debugging.
WRITING-MODE:TB-RL (MSDN)
Ms Proprietary properties that cannot pass checksums.

• In IE7, overflow also becomes a layout trigger:

Overflow:hidden|scroll|auto
This property does not trigger the layout function in previous versions of IE.
Overflow-x|-y:hidden|scroll|auto
Overflow-x and overflow-y are attributes in the CSS3 box model and have not been widely supported by browsers. They do not have the ability to trigger layout in previous versions of IE.

• Another IE7 on the screen add a few haslayout actors, if only from the haslayout this aspect, Min/max and width/height performance similar, position of fixed and absolute is exactly the same.

Position:fixed
./.
Min-width: Any value
Even if set to 0, you can get the element to get layout.
Max-width: Any value other than ' None '
./.
Min-height: Any value
Even if set to 0, you can let the element's Haslayout=true
Max-height: Any value other than ' None '
./.

The above conclusions are obtained by using IE Developer Toobar and prior test.

About inline level elements

For inline elements (such as span elements that can be either default or inline), you can also be display:inline elements.

width and height trigger haslayout only under ie5.x and IE6 or later versions of Quirks mode, and for IE6, if the browser runs in standard compatibility mode, the inline element ignores the width or height property, so set the width or height cannot order the element to have layout in such a case.

zoom can always trigger haslayout, but it is not supported in IE5.0.

If an element with "layout" is also display:inline, its behavior is similar to that of the standard Inline-block: in a paragraph the same way as normal text in horizontal and continuous arrangement, affected by vertical-align, And the size can be adaptively adjusted according to the content. This also explains why inline elements in Ie/win alone can contain block-level elements and less problematic, because in other browsers display:inline is inline, unlike Ie/win, once the inline element has layout, it becomes inline-block.

Script Properties Haslayout

We call haslayout "script attributes" here to differentiate ourselves from our familiar CSS attributes.

Note that once an element has a layout, there is no way to set it to Haslayout = False.

Haslayout-property can be used to detect whether an element has a layout: for example, if its ID is "Eid", then just

Ie5.5+ 's Address bar is entered Javascript:alert (Eid.currentStyle.hasLayout) to detect its state.
The Developer Toolbar of IE can check the current style of an element in real time, and if Haslayout is true, its value is shown as "-1". We can trigger haslayout for debugging by setting "Zoom (CSS)" to "1" by modifying the properties of an element in real time.

Another thing to note is that "layout" can affect scripting programming. If an element has no "layout", then Clientwidth/clientheight always returns 0. This can confuse some novice scripting, and it's not the same way as Mozilla browsers do. But we can use this to detect "layout" in IE5.0: if ClientWidth is 0 then this element has no layout.

CSS Hacks

The following hack that are used to trigger haslayout have been tested by IE6 and the following version. Future versions of IE may have different treatment for this. If a new version of the browser is released we will rearrange this part of the content.
John Gallant and Holly Bergevin released in 2003 Holly hack :

/* \*/* HTML. gainlayout {height:1%} /* */

• Allows any element of ie5+ to be layout, in addition to the inline elements in the standard compatibility mode IE6.
• Generally very effective, except in some rare cases, need to use height:0 or 1px better.
• Incompatible with Overflow:hidden, except in the IE6 annotation compatibility mode (because then if the parent element is not set high, then height:1% will be changed back to Height:auto).

Or we can use underscore hack:

. gainlayout {_height:0}

In addition, a more backward-compatible approach is to use conditional annotations (conditional comments):

<!--[If LTE IE 6]>
<style>
. gainlayout {height:1px}
</style>
<! [endif]-->

It is also a safe and effective way to link an external style sheet file that is specifically modified to Ie/win in a conditional comment:

<link rel= "stylesheet" href= "Allbrowsers.css" type= "Text/css"/>

<!--[If LTE IE 6]>
<link rel= "stylesheet" href= "Iefix.css" type= "Text/css"/>
<! [endif]-->

We are more inclined to use height:0 and 1px--and advocate always using the height unless it conflicts with something else (Overflow:hidden). For values, we tend to avoid 1% because it may (albeit rarely) cause problems .

Height cannot be applied to inline elements in standard mode. In this case we can use Display:inline-block or zoom:1.

We have seen some cases of blind use of Holly hack really as holy (divine) hack, such as the use of floating elements or the use of this hack for elements that already have a certain width. Remember that the purpose of this hack is not to add a height to an element, but to trigger haslayout = True.

Do not set layout:* {_height:1px} for all elements. To get layout is not to get a panacea, it's just to change the rendering mode.

Hack finishing

But the browser will always change, we need to face a number of problems, such as the problem of some IE6 bugs that hack to be invalidated (and even harmful) by bug fixes in IE7 or later versions of a new browser, such as a similar layout bug in a new version of browsers that still exists but is used for hack filtering , such as * HTML does not work properly the problem. In this case, MS Proprietary properties zoom can be considered for use.

<!--[If Lt IE 7]><style>
/* IE 6 + IE5.5 + IE5.0 style * *
. gainlayout {height:0}
</style><! [endif]-->

<!--[if IE 7]><style>
. gainlayout {Zoom:1}
/* or anything else you may need later.
</style><! [endif]-->

zoom:1; You can have any element of ie5.5+ (including inline elements) layout, but not in IE5.0.
• No other collateral effects (inline elements will become inline-block, of course).
• If you need to pass validation, you should hide the zoom with a conditional annotation.

In fact, when we consider the "backward compatibility" is very contradictory, we strongly recommend that the page designer to look back at their own page in the obvious or not obvious "hacks", and conditional comments for different browsers to deal with the security.

About the small problem of IE MAC

IE mac and Windows under IE is a completely different two things, they have their own rendering engine, ie Mac is completely unaware of "haslayout" (or contenteditable) what is called. In contrast, IE Mac's rendering engine should be more standard-compatible, such as height is treated as height, no other effect. Therefore, the hacks and other solutions for "haslayout" (especially by using the height or width properties) are often harmful to IE Mac, so they need to be hidden. More questions about IE Mac can be found in ie Mac, bugs and Oddities pages .

MSDN Documentation

There are few places in MSDN that involve haslayout this MS attribute, but there is little to explain the relationship between layout and the IE rendering model.
In IE4, almost all elements have some kind of layout (MSDN) In addition to not specifying a wide inline element without absolute positioning. In this early layout concept, like border, margin, padding these properties are called "layout attributes" and they cannot be applied to a simple inline element. In other words, "owning layout" can be roughly understood as "you can have these attributes."

The layout attribute is still used on MSDN, but the meaning has changed, and they have nothing to do with the elements that have layout. In the IE5.5 has introduced the MS's proprietary attribute Haslayout, also just some kind of internal sign bit.

In IE5.5, the MSHTML Editing Platform (that is, a document that allows users to edit, drag, and resize layout elements in real time) describes three important and layout-related features:

• If there is content in a layout element, the layout of the content will be determined by its bounding rectangle.
• Having layout basically means that an element is a rectangle.
• Internally, owning layout means that an element will be responsible for drawing its internal content.

(Editing Platform)

The internal work mechanism associated with layout itself was not documented until August 2005, when Markus Mielke [MSFT] for the WEB standards Project and Microsoft's Special working Group. Open the door to an in-depth discussion:

In general, in Internet Explorer's DHTML engine, elements are not responsible for their own placement. Although a div or a P element has a location in the source code, there is a location in the document flow, but their content is controlled by their nearest layout ancestor (often the body). These elements rely on the layout of their ancestors to deal with heavy tasks such as sizing and measuring information.

Analysis

Our analysis attempts to explain what has happened in known cases, and this analysis should also serve as a guide to unknown cases. But the black-box test of our attempts to use various test cases to cast stones is doomed to not eliminate the mystery of the black box-we cannot answer the question of why. We can only try to understand the working framework of the entire "haslayout" pattern and how it affects the rendering of the Web page document. So ultimately we can only provide some guidelines (and only guidelines, not absolute solutions).
We think they are referring to a small form. The internal content of a layout element is completely independent, and it cannot affect anything outside its bounds.
The MS attribute layout is just a bit of a flag: once it is set, the element will have a layout "feature", which includes the specific energy embodied in itself and the elements of its non-layout children-such as floats and cascades.
This independence may explain why layout elements are usually stable, and they can make some bugs disappear. The cost of this situation is two, one deviation from the standard, and the other is that it does not take into account the possible future bugs and problems.
MS's "page" mode, from the semiotic point of view, can be seen as a lot of unrelated small blocks, while the HTML and the mode of the consortium that the "page" pattern should be complete, the story of the relevant information block composition.

Detailed description of various situations

Clear float and auto extend fit height

Floating elements are automatically included by the layou element. This is a problem many novice often encounter: the page completed under IE to the standard compatible browser all the floating elements that are not cleared out of their containing container

· containing floats
· How to clear floats without structural markup

Conversely: What if you do need a floating element to extend its containing container, that is, automatically include an effect that is not desired? You may also have this headache, and the following in-depth discussion is an example:

· Acidic float tests

In IE, a floating element is always "subordinate" to its layout containing the container. The elements that follow are affected by this layout containing the container rather than the floating element.

This feature, and the IE6 that automatically expands to accommodate the inner content width, can be viewed as being affected by this rule: "determined by its bounding rectangle."

Worse problem: Clear cannot affect float elements outside of its layout containing container. If the page that relies on this bug to be laid out in IE is to be transferred to a standard compatible browser, only redo it all.

IE's automatic inclusion of floating elements is also a frequently needed effect that can be achieved in other browsers: Refer to our "Places like CSS Specification" section to learn about the content that contains floating elements.

Element next to a floating element

When a block-level element immediately follows a left-floating element, it should-as a block-level element-ignores the floating element, and its contents should be shifted by the floating element: a literal content that is immediately after the left floating element, in a block-level element. It should be arranged along the right order of the floating element and will continue to flow below the floating element if its length exceeds the floating element. But if this block-level element has layout, for example, if the width is set for some reason, the whole element will shift as if it were a floating element, so that the text is no longer wrapping around the left floating element (it will form a rectangular area and remain on its right side). ）
The percentage width of a block-level element in IE5 is calculated based on the remaining space next to the floating element, whereas in IE6 it is calculated according to the free space of the entire parent block-level element. So setting the width:100% in IE6 can cause an overflow of some kind of floating element, so all the layout problems will come.
Some test cases about the Haslayout block next to the floating block:

· by using width
· By using Min-width (ie 7) and zoom (ie 6)

Similarly, a relative positioning element adjacent to a floating element whose position offset should refer to the padding (padding) edge of the parent element (for example, left:0; a relative positioning element should be stacked above the floating element before it). In IE6, the offset left:value; is calculated from the edge of the right margin (margin) of the floating element, which results in a horizontal dislocation due to the change in the width of the floating element (one solution is to replace it with Margin-left, but it should also be noted that there are some weird problems with a percentile).

· Layout blocks with relative positioning adjacent to floated blocks

According to the specification, the floating element should be interwoven with the box that follows. This is not possible for rectangles without intersecting two-dimensional spaces.
If anyone really needs to give in to IE's improper behavior, then how to make the box in the standard-compatible browser behave like this--something like a layout box that automatically "shrinks" and gives space to the floating elements it's placed in front of it--that's a problem. The approach we have given is to create a new block-level format range with a floating element (blocks formatting context), which is discussed in our "places similar to CSS specifications".
You can (again) visit the following page:

· Three pixel text-jog

We can see that the layout element following a floating element does not display this 3px gap bug because the 3px hard edges outside the floating element cannot affect the internal content of a layout element, so this hard edge pushes the entire layout element to the right 3px. Like a shield, layout can protect its internal content from being affected, but the power of the floating element pushes the entire shield.

List

Whether the list itself (OL, UL) or a single list element (LI), owning a layout will affect the performance of the list. Different versions of IE have different performance. The most obvious effect is on the list symbol (if your list has a custom list symbol, it will not be affected by the problem). These symbols are likely to be attached to list elements by some internal mechanism (usually attached outside them). Unfortunately, because they are added through the "internal mechanism," we cannot access them and can not correct their error performance.
The most obvious effects are:

• After the list has been layout, the list symbol disappears or is placed in a different or incorrect position.

Sometimes they can appear again by changing the margins of the list element. This seems to be the result of the fact that the layout element tries to trim the internal content beyond its bounds.

• List elements After layout, there will be the same as the above problems appear, more references (extra vertical space between list items) http://www.brunildo.org/test/IEWlispace.php

A further problem is that any list element with layout appears to have its own independent counter (in the sequence table). For example, we have an ordered list of five list elements, and only a third list element has layout. We will see this:
1.. 2.. 1.. 4.. 5..

• In addition, if a layout list element is displayed across rows, the list symbol is aligned at the bottom (not at the top of the line expected).

• Some of these problems are still unresolved, so it's best to avoid listing and list elements when you need a list of layout. If you need to limit the size, it is better to set the size of the other elements, such as the entire list outside the set of an element and set its width, or, for example, to set the height of the contents of each list element and so on.

• A common problem with the list in another IE is now when the content in an Li is a display:block anchor (anchor). In this case, the spaces between the list elements are not ignored and are usually displayed as an extra row between each li. A solution to avoid this extra blank in the vertical direction is to give these anchor points a layout. Another advantage is that the entire rectangular area of the anchor can respond to mouse clicks.

Form

A table is always layout, and it always behaves as an object with a defined width. In IE6,table-layout:fixed is usually the same as a table with a width of 100%, which can also cause many problems (some computational errors). In addition, there are other situations that need to be noted in the quirks model of IE5.5 and IE6.

Relative positioning element (R.P.)

Note that because Position:relative does not trigger haslayout, many rendering errors such as content disappearance or dislocation will start. These phenomena may occur when the page is refreshed, the window is resized, the page is scrolled, and the selection is selected. The reason is that when IE offsets the element by this attribute, it seems to have forgotten to send a signal to "redraw" the element layout (and if it is a layout element, the signal to its child will be emitted normally in the chain of its redraw event).

· R.P. Parent and disappearing floated child
· Disappearing List-background bugs

The above is a description of some related issues. As a speaking experience, it is best to layout a element when it is positioned relative to it. Again, we need to check whether the parent element that owns this structure also needs to be layout or position:relative or both, and it is important if it involves floating elements.

Absolute positioning Element (A.P.):
Contains blocks, what is the containing block?

It is important to understand the inclusion block concept of CSS, which answers the question of where the absolute positioning element is relative: the inclusion block determines the offset starting point, and contains the calculation reference for the percentage length defined by the block.

For an absolutely positioned element, the containing block is determined by its nearest location ancestor. If none of its ancestors were positioned, then the initial inclusion block HTML is used.

Typically, we use position:relative to set any containing block. This means that we can make an absolute positioning element reference to the origin and length of the elements, such as not dependent on the order, which can meet such as "content first" the concept of accessibility, but also to the complex floating layout convenience.

However, due to the existence of the concept of layout, the effect of this design concept in IE will have to play a question mark: because in IE absolute positioning only when its containing elements of the layout will be calculated correctly, and the absolute positioning elements of the percentage width of the reference is also mistaken object. Here IE5 and IE6 behave differently but all have their problems. IE7B2 's behavior will be much better, although some small places still have mistakes. In short, as far as possible to the absolute element of the containing block has layout, and as far as possible is the absolute positioning element of the parent element (that is, the shifting element and the absolute positioning element between the other ancestors of the absolute positioning element).

Suppose a layout parent element is positioned relative-we have to give it layout to make the offset work:

· Absolutely buggy II

Assuming that an unassigned parent element requires a specific size and that the page design is based on the percentage width-we can give up the idea because the browser is poorly supported:

absolutely positioned element and percentage width

Filter

The MS Proprietary Filter Property filter is only available for layout elements. Some filters extend the bounds of the object. They will show their own peculiar flaws .

Rearrangement of rendered elements (Re-flow)

When all the elements have been rendered, if there is a change caused by the mouse passing (for example, the background of a link), IE will rearrange its layout containing chunks. Sometimes some elements will be placed in a new position, because when this mouse occurs, IE already knows all the relevant elements of the width, offset and other data. This does not occur when the document is first loaded, and the width is not determined because of the automatic expansion feature. This can cause the page to jump when the mouse passes.

· Jump On:hover
· Quirky percentages:the reflow

The bugs associated with the rearrangement problem can cause a lot of trouble with the percent margin and the more mobile layouts that the filler uses.

Background original point

The MS proprietary haslayout also affects the positioning and extension of the background. For example, according to CSS specifications , background-position:0 0 should refer to elements of the "filler Edge (padding edge)". Under Ie/win, if Haslayout = False refers to "border edge (Border edge)", when haslayout=true refers to the padding edge:

· Background, Border, Haslayout

margins overlap

Haslayout will affect the margins of a box and its descendants overlap. According to the specification, if a box has no padding and top border, its top margin should overlap the top margin of the first child element in its document stream:

· Collapsing margins
· uncollapsing Margins

If the box had layout in Ie/win it would not have happened: it seemed that owning layout would prevent the child's margin from sticking out of the container. In addition, when haslayout = True, there is a problem with margin calculation errors regardless of whether the container or child element is included.

· Margin collapsing and haslayout

Block-level links

Haslayout affects the mouse response area (clickable area) of a block-level link. Usually haslayout = False, only text overlays can be used to respond. Haslayout = True, the entire block area is responsive. Any block-level element that adds events such as Onclick/onmouseover also has the same behavior.

· Block anchors and Haslayout

Using the keyboard to navigate within a page: Exploring
When you use tab to browse through the page, if you enter a page link (in-page link), then the next press TAB will not continue normally:

· Haslayout Property characterizes IE6 Bug
· keyboard navigation and Internet Explorer

The TAB key takes the user to (this is usually the wrong) the first target of its nearest layout ancestor (if the ancestor is composed of a table, Div, span, or some other tag).

Contraction siege (shrink-wrapping) phenomenon

Adding certain properties to elements that already have width:auto causes them to use a narrowing algorithm when calculating their width. such as these attributes Float:left|right, position:absolute|fixed, display:table|table-cell|inline-block|inline-table.

The phenomena caused by these attributes also exist in Ie/win, which is of course only for those attributes that it supports. But when an element that is supposed to shrink encloses contains a block-level element with "layout", in most cases the child element's width expands as much as possible regardless of what is contained in it, and also prevents the parent element from shrinking.

Example:
A floating vertical navigation unordered list does not shrink surrounded because the links in it have layout:a {Display:block zoom:1} In order to eliminate redundant blank bugs in the list and expand clickable areas.

This contraction is still valid only in the following cases: the child with the layout element is also given a specific width, or the child element itself is an element with a shrinking bounding attribute, such as a floating element.

Edge Trimming

Typically, when a box contains a more complex structure such as a content that extends its edge, the container often needs "haslayout" to avoid some rendering errors. But using this common method is also a dilemma when dealing with boundaries, because an element that gets "layout" becomes some kind of closed box.
The Inner content box is trimmed, such as using a negative margin to move outward.

· clipping of negative margined blocks in a haslayout container

The trimmed part can reappear when the content box triggers "layout", but it is necessary to have position:relative in the IE6. IE7 has made a difference in this area, and it no longer needs extra position:relative.