hasLayout

Modified on 2010/05/22 15:46 by Administrator — Categorized as: Web Standard

Default layout elements

The following elements appear to have layout by default.

* <html>, <body> * <table>, <tr>, <th>, <td> * <img> * <hr> * <input>, <button>, <select>, <textarea>, <fieldset>, <legend> * <iframe>, <embed>, <object>, <applet> * <marquee>

Properties

The following CSS property/value pairs will, if applied, allow an element to gain layout.

position: absolute Refers to its containing block, and that's where some problems begin.

float: left|right The float model has a lot of quirks due to some aspects of a layout element.

display: inline-block Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.

width: any value other than 'auto' This is often an implicit fix, more often the trigger when hasLayout does things wrong.

height: any value other than 'auto' height: 1% is used in the Holly Hack.

zoom: any value other than 'normal' (MSDN) MS proprietary, does not validate. zoom: 1 can be used for debugging.

writing-mode: tb-rl (MSDN) MS proprietary, does not validate.

As of IE7, overflow became a layout-trigger.

overflow: hidden|scroll|auto This property did not apply in prior versions, unless “layout” was added to the box by other triggers.

overflow-x|-y: hidden|scroll|auto As part of the CSS3 box model module, overflow-x and -y are not widely implemented yet. They did not trigger hasLayout in prior versions of IE.

And new hasLayout actors appeared on the screen in IE7. As far as hasLayout is concerned, the min/max properties act similar to how width and height works, and the effects of fixed and absolute positioning seem to be identical.

position: fixed ./.

min-width: any value Even the value 0 lets the element gain layout. max-width: any value other than 'none' ./. min-height: any value Even the value 0 sets haslayout=true max-height: any value other than 'none' ./.

Based on querying the IE Developer Toolbar and preliminary testing.

Notes on elements at inline level

For inline elements (either inline by default like span, or having display: inline)

* width and height trigger hasLayout in IE 5.x and IE 6 or newer in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout. * zoom always triggers hasLayout, but it's not supported in IE5.0.

Elements having both “layout” and display: inline behave in a similar way as what the standards say about inline-block: they flow horizontally like words in a paragraph, are sensitive to vertical align, and apply a sort of shrink-wrapping to their content. As soon as the inline elements have layout, they act as inline-block, this is an explanation why, in IE/Win, inline elements can contain and hold block-level elements with less problems than in other browsers, where display: inline remains inline.

Resetting hasLayout

Resetting the following properties to their default value in a separate rule set will reset (or undo) hasLayout, if no other property giving hasLayout remains in effect:

* width, height (to 'auto') * max-width, max-height (to 'none') (in IE 7) * position (to 'static') * float (to 'none') * overflow (to 'visible') (in IE 7) * zoom (to 'normal') * writing-mode (from 'tb-rl' to 'lr-tb')

Authors must be careful with resetting these properties. Consider a menu system: Changing the hasLayout-status on a:hover, be it intentionally or not, might result in unexpected rendering (or IE 6 program instability when undone dynamically in combination with position: relative).

The display-property differs: while 'inline-block' sets haslayout = true, the flag will not be reset to false later on by overriding the value with 'block' or 'inline' in another rule set.

Setting the properties min-width, min-height to their default value '0' still gives hasLayout, but IE 7 accepts for them the invalid value 'auto', which resets hasLayout.

Relation document