Layout with CSS3 - HTML5 and CSS3 - page 309

12 14 4 6 8 9 10 11.5 12 5 5.1

inline-block ● ● ● ● ● ● ● ● ● ● ●

● ● ● ● ● ● ● ● ● ● ●

display: table

calc ○ ○ ● ●

box-sizing ● ● ○ ○ ● ● ● ● ○ ●

Media queries ● ● ● ● ● ● ● ● ● ●

Flexboxes ○ ○ ○ ○ ○ ○ ○

Multiline flexboxes ○

Templates/grids ○

Regions

Exclusions ○

Key:
● Complete or nearly complete support
○ Incomplete or alternative support
Little or no support

inline-block in IE6 and IE7
Although IE didn't add support for inline-block until version 8, it's pos-
sible to achieve the same effect by taking advantage of some nonstan-
dard behavior. IE has an internal concept called hasLayout that endows
elements with special properties as far as the layout engine is con-
cerned. For our current purposes, the only thing you need to know is
that an element that is display: inline but also hasLayout will behave
like an inline-block element in other browsers.
One of the simplest ways to trigger hasLayout is to use the IE -specific
CSS extension zoom with a value of 1 (which makes no visible differ-
ence), coupled with the star hack:

display: inline-block;
*display: inline;
zoom: 1;