Reprint: On Have layout_css/html

Translator Note: A very good article, a long time ago on the blog on the recommendation, the two days off and took a little time to translate, recommended to read. The original English text is here.

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)

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, which is somewhat similar to the concept of a form.

Microsoft's developers think that box champion (Box-type elements) should have a "property" (this is a concept in object-oriented programming), so they use layout , that is hasLayout .

　　hasLayoutIn fact, is not a property is not a behavior, but IE this rendering engine generation inheritance has always been a rendering concept, under the concept of the rendered elements will have an attribute.

In fact, this rendering feature is in some HTML elements, and in other elements can also be triggered by some CSS properties true , and once the trigger will be irreversible.

Terms

When we say that an element "owns layout" or "gets layout", or that an element "has layout", we mean that its Microsoft proprietary attribute hasLayout is set up to true . 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".

Methods that give layout a default layout element include setting the CSS properties that can be triggered hasLayout = true . Refer to the default layout elements and the list of these properties. There is no way hasLayout = false to set the CSS properties unless you remove them from the trigger hasLayout = true .

All kinds of problems

　　hasLayoutThe problem, whether it's a novice or a veteran, that designers or programmers may have encountered. Elements with layout often have unusual and unpredictable display effects, 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:

• <table>, <tr>, <th>, <td>
• <input>, <select>, <textarea>, <button>
• <iframe>, <embed>, <object>, <applet>
• <marquee>

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: 任意值

Many people encounter layout related problems occur, usually first try to use this to fix.

height: 任意值

height:1% is used in Holly Hack.

zoom: 任意值(MSDN)

Ms Proprietary properties that cannot pass checksums. However zoom: 1 , it can be used temporarily for 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.

On the other hand, IE7 a few new haslayout on the screen, 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: 任意值

Even if set to 0, you can get the element to get layout.

max-width: 除 none 之外的任意值

./.

min-height: 任意值

Even if set to 0, you can let the element's Haslayout=true

max-height: 除 none 之外的任意值

./.

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

About inline level elements

For inline elements (such as elements that can be inline by default span , or elements that can be display: inline )

• widthand height only under ie5.x and IE6 in quirks mode hasLayout . Because in IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot order the element to have a layout in this case.
• zoomCan always be triggered hasLayout , but not supported in IE5.0.

An element with "layout", if at the same time display: inline , behaves in a similar way to what the standard says Inline-block: In a paragraph the same way as normal text in horizontal and continuous arrangement, affected by vertical-align, and size can be adjusted adaptively according to the content. This can also explain why inline elements in Ie/win can contain block-level elements but less problematic, because in other browsers it display: inline is inline, unlike ie/win once the inline element has layout and 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 hasLayout = False up again.

Haslayout-property can be used to detect whether an element has a layout: for example, if it id is a "Eid", then just type in the ie5.5+ 's address bar to javascript: alert(eid.currentStyle.hasLayout) detect its state.

The Developer Toolbar of IE can check the current style of an element in real time hasLayout , and if true, its value is shown as "-1". We can trigger the "zoom (CSS)" setting to "1" to debug by modifying the properties of an element in real time hasLayout .

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 It's 0 then this element has no layout.

CSS Hacks

haslayoutThe following hack that are used for triggering 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%}
/* */	

• You can get layout for any element of ie5+, in addition to the inline elements in the standard compatibility mode IE6.
• are generally very effective, except in some rare cases, need to use height:0 or 1px better.
• and incompatible overflow: hidden unless it is in the IE6 annotation compatibility mode (because it is then changed back if the parent element is not set high height: 1% 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
] Stylesheet "href=" Iefix.css "type=" Text/css "/> <![
Endif]-->

We prefer to use height: 0 and 1px --and advocate always use height unless it conflicts with something else ( overflow: hidden ). For a value, we tend to avoid 1% it because it may (albeit rarely) cause some problems.

One need to be aware of is that if we want an element to remain inline, then we can't use it height display: inline-block . We only use it in the early debugging phase zoom: 1 to avoid some rendering errors.

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 it hasLayout = True .

Do not set layout for all elements: * {_height: 1px;} . 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 the problem of not working properly. In this case, the MS proprietary attribute zoom can be considered for use.

<!--[if LT ie 7]><style>
/* IE 6 + IE5.5 + IE5.0 used 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.
• There is no other side effect (the inline element becomes inline-block, of course).
• If you need to pass validation, you should use conditional comments to zoom hide them.

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, for example height , is treated as height , no other effect. Therefore, the hacks and other solutions for "haslayout" (especially by using height or width attributes) 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 attributes are called "Layout properties", they are not 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. This proprietary property of MS has been introduced into the IE5.5 hasLayout , and it is just some kind of internal sign.

In IE5.5, the MSHTML Editing Platform (that is, a <body contenteditable=true> 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.

The idea of owning a 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] opened the door to in-depth discussions due to the WEB standards Project and Microsoft's Special working Group:

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.

(Haslayout Overview)

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 its own special layout "feature", which includes special features such as floating, floating, stacking, counting, and so on itself and its non layout children.

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 frequent problem for many beginners: the page completed under IE to the standard compatible browser all the floating elements that are not cleared are 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 that are outside the 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.

For more information, see this section, "places like CSS specifications".

Element next to a floating element

When a block-level element is immediately after a left floating element, the text content should be arranged along the right order of the floating element and slide below the floating element. But if the block-level element has layout, such as width for some reason, the layout element behaves as a rectangle, where the text does not slide to the bottom of the floating element. Its width is also calculated incorrectly-starting from the right of the floating element, so if setting it width: 100% will cause the width of the block and the width of the floating element to appear, the horizontal scroll bar appears. This is a far cry from what the norm describes.

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 over the floating element before it). In IE, the offset left: value; is calculated from the edge of the right margin (margin) of the floating element, which results in horizontal dislocation due to the change in the width of the floating element (a workaround is margin-left substituted, but it is also noted that there are some weird problems with percentile).

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.

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.

Read more about this article, "places like CSS specifications" this part

List

Whether it is the list itself ( ol, ul ) or a single list element ( li ), owning a layout affects 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.

• After the list element gets layout, there will be the same problem as above, more references (extra vertical space between list items)

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..

Also, if a layout list element is displayed across rows, the list symbol is aligned at the bottom (rather than 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 symbol 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 li the content in a is an display: block anchor point (anchor). In this case, the spaces between the list elements are not ignored and are usually displayed as an extra row li between each. 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

　　tableThere is always a layout, it always behaves as a defined width object. In IE6, table-layout: fixed it's usually the same as a table with a width of 100%, which can also cause a lot of 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 position: relative many of the rendering errors, such as content disappearance or dislocation, will start as a result of not triggering haslayout. 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 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, the initial inclusion block is used html .

Normally we would use it 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 layout concept, the effect of this design concept in IE will be a question mark. Because the element that is absolutely positioned in IE is offset relative to its nearest layout location ancestor, the percentage size is based on the layout of the next layout ancestor that locates the ancestor. Notice the small difference here, and just mentioned position: relative is not going to trigger the haslayout.

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 complete, if there is a change caused by the mouse passing (such as a change in a link background ), IE will rearrange its layout containing blocks. 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 the elements of the "filler Edge (padding edge)." And under Ie/win, if hasLayout = false it refers to the "border edge (Border edge)", when hasLayout=true the point is the filler edge:

• Background, Border, Haslayout

margins overlap

　　hasLayoutCan 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 hasLayout = true , if there is a container or child element, there will be problems with margin calculation errors.

• 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 the tab to browse through the page, if you enter a page link (in-page link), then press the nexttab 键就不会正常继续了：

• Haslayout Property characterizes IE6 Bug
• Keyboard navigation and Internet Explorer

　　tab 键会把用户带到(这通常是错误的)其最近的 layout 祖先中的第一个目标(如果这个祖先是由 table， div， span 或某些别的标签构成)。

Tiering, tiering, and layout

There appear to be two hierarchies and stacking orders in Ie/win:

• One is (pseudo) a pattern that attempts to use CSS: Effect of Z-index value to RP and AP blocks
• There is also a stacking order produced by the behavior of "haslayout" and its twin brothers "Contenteditable". As shown in the relative positioning example above, the stacking phenomenon under the influence of layout is like the Masterpiece Law of Harry Houdini, the Magician, who became famous as a card trick.

Although the two stacking modes are incompatible, they coexist in the rendering engine of IE. Experience: When debugging, both situations have to be considered. We may see problems regularly in pull-down menus or similar complex menus, because they tend to involve a lot of headaches, such as stacking, positioning, and floating. Layout is a possible fix for those elements that are z-index positioned, but it's not limited to that, but here's a reminder.

The contenteditable of Chaos.

If you set an attribute to an HTML tag contenteditable=true , for example, you would <body contenteditable=true> allow real-time editing, dragging, and resizing of the element and its layout child elements. You can use this attribute on a floating element or a layout list element in a sequence table to see the effect.

In order to manipulate elements (edit them), "contenteditable" and "Haslayout" hasLayout true introduce a separate stacking order for those elements that are returned.

Editing Platform inherits the layout concept, and the misunderstanding of layout is based on the contenteditable (those applications that integrate the IE editing engine to some extent imply some kind of forced backward compatibility to the layout concept).

• More on contenteditable

A place like CSS specifications

Is your MSIE page a mess in another browser? We don't need to let that happen. If used properly, any good browser can handle MSIE pages-as long as you use some of the right CSS.

With the hasLayout subtle similarities between "new block-level format content", there are several ways to implement the "include floating element" effect in a standard-compatible browser hasLayout , and some of the "elements next to a floating element" effect.

• Reverse Engineering Series
• Simulations

Quirks mode

Some doctype, or <xml> declarations, trigger "quirks mode" or backward compatibility mode in IE6. In this mode, IE6 is like IE5.5 and has the same bug, same problem and same behavior as his brother.

For IE7, the <xml> declaration does not change the render mode again; to trigger the quirks mode, we have to insert a comment to do so. (whether the IE7 quirks mode is the same as the IE6 quirks mode is yet to be verified)

<?xml version= "1.0" encoding= "Utf-8"?>
<!--... Let IE7 run in quirks mode-->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
 "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD" >

layout-Conclusion

The entire layout concept is incompatible with some basic CSS concepts, including, arranging, floating, positioning, and cascading.

Because the elements on the page have or are not layout, it can cause ie/win behavior to violate the CSS specification.

Have layout-another engine?

IE's object model looks like a blend of document models and their traditional application models. I mention this because it is important to understand how IE renders the page. The switch from the document model to the application model is to give an element "layout".

(Dean Edwards)

Sometimes it is impossible to explain an action: like Haslayout, one uses two different rendering engines depending on its state, and each has its own bugs and quirks.

Non-resolved bugs

Software bugs are caused by human errors in the process of making the integrity and logic issues poorly considered. This is the inherent flaw of mankind, there is no good solution at present.

Also because of this flaw, any attempt to fix bugs without rewriting the software will inevitably lead to more complex bugs in the software.

All software that relies on other software--including, of course, dependent operating systems--also relies on their bugs. So we get a bunch of bugs out of all the associated software, which makes it almost impossible to find a bug-free software.

(Molly, the cat?)

This article was created on June 30, 2005 and was last modified on April 2, 2006.