5.3 The hasLayout Property and CSS2.1

  • Article

The hasLayout property conflicts with a number of normative CSS rules, although it is similar in concept to block formatting contexts. This section discusses those issues.

  1. Resolving Containing Blocks

    In IE7 mode, only elements that have layout can be containing blocks, which conflicts with CSS2.1 normative definition (see 10.1). Not all block elements have layout by default, yet block elements should be the containing blocks of all their children that have relative or static positioning.

    As a result, IE7 mode may not treat the following HTML elements as containing blocks when it otherwise should:

    • div

    • p

    • ul

    • ol

    • pre

    • h1 through h6

    • form

    • fieldset

    • dl

    • blockquote

      Very often, the position property of a div element is assigned a value of relative to ensure that the absolutely positioned elements within are bound by the containing block of the div element. In quirks mode, the absolutely positioned child element escapes the boundaries of its containing block. It then is typically positioned with respect to the body element.

  2. Windows Internet Explorer in IE8 mode and IE9 mode has addressed the following issues. See section 2.1.54.

    1. Collapsing Margins

      The [CSS-Level2-2009] specification states that the top margin of a child element can collapse with the top margin of its parent element as long as the parent has no padding or border.

      In IE7 mode, these margins do not collapse when the parent element has layout. See section 2.2.6 and section 2.1.33.

    2. Laying Out and Clearing Floats

      In IE7 mode, when an element has layout, its box size expands to include all floated child elements, so that clearing floats has no effect outside the float's layout container.

      In addition, if a non-floated element follows a float, the content box of the element is displaced by the float and not just by its content.

    3. Drawing Background Colors and Images

      All borders are drawn on top of box backgrounds, so that when the border style is not continuous (such as a dotted border), the specified background color shows.

      In IE7 mode, the background color shows in a non-continuous border only when the element does not have layout.

      Background images are positioned within the element's padding box by default so that the background image should not bleed underneath the border. The exception is when the image is tiled and positioned at 0,0; in this instance, the image bleeds underneath the border.

      In IE7 mode, a tiled background image does not bleed under the border if the element has layout.

    4. Laying Out Form Elements

      In IE7 mode, the horizontal margins of the input elements text and textarea in an element with layout is the sum of the horizontal margins of their containing boxes up to, but not including, the next hasLayout container.