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
.
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:
zoom:1
, and height:0
for IE5.0 (to cover all versions.)display:inline-block
.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.)
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:
display:inline-block
. They simply get hasLayout (the only visible difference here is the background extension.)display:inline
. They get the “inline-block behaviour”.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:
div.test { display: inline-block; }
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.
This particular behaviour of the display:inline-block declaration has been dubbed Trip Switch hasLayout trigger by Claire (Suzy) Campbell.
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