An image inside a box - Quirks

In each of the following rows there are 5 boxes (yellow background, red border.) In the first four an image is the only content of a box, with different vertical-align values: baseline, bottom, top, middle. The last box contains just text. Change font size to test with different heights of the boxes.

baseline bottom top middle just text
'normal' (white space between box and IMG tags)
NO white space between box and IMG tags
Container has hasLayout
IMG has display:block
IMG has display:block and container has hasLayout
Container has same height as IMG
IMG is inside a TD (with white space)
IMG is inside a TD (no white space)
IMG with display:block inside a TD
Container has display: table-cell
baseline bottom top middle just text

Some tests with empty divs, for IE7-

empty (no white space) with white space with empty comment
no hasLayout
hasLayout

Related tests:

CSS tests home