display: inline-table
Works (more or less) in: IE5/Mac, Op6+, Saf, Gecko 1.9+. Many differences in vertical-align interpretation.
Series A: Widthless inline-table divs, together with text
A1. inline-table, no vertical-align specified
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
A2. inline-table with vertical-align: top
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
A3. inline-table with vertical-align: bottom
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
A4. inline-table with vertical-align: middle
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
A5. inline-table with vertical-align: baseline
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
Series B: inline-table divs having assigned width, together with text
This is like series A but with an assigned width on the inline-tables. IE5/Mac works better: without a width the inline-table stretches to the full available width when it contains widthless block elements (and in other conditions) instead of shrink-wrapping the content.
B1. inline-table with assigned width, no vertical-align specified
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
B2. inline-table with assigned width and vertical-align: top
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
B3. inline-table with assigned width and vertical-align: bottom
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
B4. inline-table with assigned width and vertical-align: middle
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
B5. inline-table with assigned width and vertical-align: baseline
blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
Series C: inline-table divs containing assigned width contents
This is like series A but with an assigned width on the contents of the inline-tables. IE5/Mac works better (the inline-table shrink-wrap the content.)
C1. inline-table with assigned width contents, no vertical-align specified
blah blah
Inline Block
miau miau
barabau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
C2. inline-table with assigned width contents and vertical-align: top
blah blah
Inline Block
miau miau
barabau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
C3. inline-table with assigned width contents and vertical-align: bottom
blah blah
Inline Block
miau miau
barabau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
C4. inline-table with assigned width contents and vertical-align: middle
blah blah
Inline Block
miau miau
barabau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
C5. inline-table with assigned width contents and vertical-align: baseline
blah blah
Inline Block
miau miau
barabau
blah blah
- Inline Block uno
- Inline Block due
- Inline Block tre
- Inline Block quattro
blah blah
CSS tests home