IE7-/Win: inline-block and hasLayout

In IE7-/Win the inline-block value of the CSS display property is one of the triggers of hasLayout. This is probably its only real effect.

On the other hand the “inline-block behaviour” (which the standards define in CSS2.1 9.2.4), can be (in good part) achieved in IE7-, but quite independently on using display:inline-block.

Applied to HTML inline elements

The effect of display:inline-block on a HTML inline element is to give it hasLayout, and to make it to behave as inline-block. Any other way to give hasLayout to an inline element has this same effect.

In the following test cases there are a yellow and a green span (the second one with a <br> inside.) The relevant markup is something like:

  1. <div class="container">
  2. lorem ipsum
  3. <span class="test1">
  4. Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam ...
  5. </span>
  6. lorem ipsum
  7. <span class="test2">
  8. Quo usque tandem abutere<br />Catilina, patientia nostra?
  9. </span>
  10. lorem ipsum
  11. </div>
  1. In the first case, no further properties are applied. The spans act normally as inline elements.
  2. In the second case hasLayout is given to the spans using zoom:1, and height:0 for IE5.0 (to cover all versions.)
  3. In the third case hasLayout is given to the spans using display:inline-block.
lorem ipsum Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? lorem ipsum Quo usque tandem abutere¶
Catilina, patientia nostra?
lorem ipsum
lorem ipsum Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? lorem ipsum Quo usque tandem abutere¶
Catilina, patientia nostra?
lorem ipsum
lorem ipsum Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? lorem ipsum Quo usque tandem abutere¶
Catilina, patientia nostra?
lorem ipsum

As can be seen, the third case doesn't behave any differently from the second one (except it doesn't cover IE5.0.) In both cases the spans have the “inline-block behaviour”, independently on how hasLayout is given (narrow the window to see how things wrap, especially when the first span goes on more lines.)

In other words: The “inline-block behaviour” of a HTML inline element is obtained giving hasLayout to it (display:inline-block may be used for this, but it is not necessary.)

Applied to HTML block elements

The effect of display:inline-block on a HTML block element is simply to give it hasLayout, without making it to behave as inline-block.

But we have seen that an inline element with hasLayout behaves as inline-block. What if we give hasLayout and display:inline to a HTML block element? We get the “inline-block behaviour” again!

In the following test cases there are a yellow and a green div, with text and/or other block elements inside. The relevant markup is something like:

  1. <div class="container">
  2. lorem ipsum
  3. <div class="test1">
  4. Quo usque tandem abutere<br />Catilina, patientia nostra?
  5. </div>
  6. lorem ipsum
  7. <div class="test2">
  8. <ul><li>one</li><li>two</li><li>three</li></ul>
  9. </div>
  10. lorem ipsum
  11. </div>
  1. In the first test case no further rule is applied. The divs act normally as block elements.
  2. In second test case: the divs have display:inline-block. They simply get hasLayout (the only visible difference here is the background extension.)
  3. In the third test case the divs have hasLayout and display:inline. They get the “inline-block behaviour”.
lorem ipsum
Quo usque tandem abutere
Catilina, patientia nostra?
lorem ipsum
lorem ipsum
lorem ipsum
Quo usque tandem abutere
Catilina, patientia nostra?
lorem ipsum
lorem ipsum
lorem ipsum
Quo usque tandem abutere
Catilina, patientia nostra?
lorem ipsum
lorem ipsum

In the third example above, hasLayout is given with zoom:1, and height:0 for IE5.0 (again to cover all versions.) But interestingly the combination (hasLayout plus inline) required in that example can also be obtained (in IE5.5+) with:

  1. div.test { display: inline-block; }
  2. div.test { display: inline; }

The first line gives hasLayout. The second one reset the display as desired, without taking back hasLayout. If the two declarations were written in a single rule, then this wouldn't work (hasLayout would not be set, probably because the first declaration would be overridden at a higher parsing level, before it being converted into a rule to give hasLayout, more than modifying the display.) The following test case uses this last technique.

lorem ipsum
Quo usque tandem abutere
Catilina, patientia nostra?
lorem ipsum
lorem ipsum

This particular behaviour of the display:inline-block declaration has been dubbed Trip Switch hasLayout trigger by Claire (Suzy) Campbell.

Conclusions

display: inline-block is a mean to trigger hasLayout (in IE5.5-7/Win), exactly as zoom: any_value.

Elements having both hasLayout and display:inline work similarly to the standard inline-blocks: they flow horizontally like words in a paragraph, are sensitive to vertical-align, and apply a sort of shrink-wrapping to their contents (which can include block elements.) That's true whichever the HTML element type (inline like a span, or block like a div.) What can be different (depending on the default value of the display property of the element) are the rules/hacks used to trigger the combination hasLayout plus inline.

The IE7-/Win ability of inline elements with hasLayout to act as inline-blocks is probably the reason why IE handles rather easily cases of inline elements containing block ones (even when this is done at the markup level, which is invalid according to the standards.) The IE editing engine invoked by contentEditable=true sometimes generates such invalid code.

Simple inline-block tests, other CSS tests