Display table phantom bug - IE 8

Hover test

In IE8, if a container has display:table an inner child has a phantom box created that duplicate other properties on the child such as padding, border and background.

Each Container has border-right (blue) of 10px and a grid background (25px by 25px). The green blocks with the grid backgrounds follow the each container in the source.

All inner boxes have a height of 50px and a border-right (red) of 10px.

Containers with display:table

Firefox Screenshot

IE8 Screenshot

• Transparent background image is duplicated, first twice on the true box and secondly once on the phantom box (all examples).
• Border on inner box is duplicated, first as the true border-right and secondly as the phantom border-right (example 1b, 1c & 1d).
• Padding on inner box is duplicated, first in the true box and secondly in the phantom box (example 1c & 1d).

1a: Inner box.

1b: Inner box with margin-right 100px.

1c: Inner box with and padding-right of 100px.

1d: Inner box with margin-right and padding-right of 100px.

Containers with display:table and inner box with display:table-cell

Giving the inner box 'display:table-cell' seems to stop the duplication bug in IE8 and renders like Firefox which correctly collapses the margin-right. The only problem is that the margin-right may have been needed and it does change the layout in Firefox from the previous examples.

3a: Inner box (display:table-cell).

Passed: Gecko 1.9 & IE8b

3b: Inner box (display:table-cell) with margin-right 100px.

Passed: Gecko 1.9 & IE8b

3c: Inner box (display:table-cell) with and padding-right of 100px.

Passed: Gecko 1.9 & IE8b

3d: Inner box (display:table-cell) with margin-right and padding-right of 100px.

Passed: Gecko 1.9 & IE8b

Containers with display:table and padding

Firefox Screenshot

IE8 Screenshot

IE8 handles this all wrong since the margin of the inner box is creating part of the phantom box.

3a: Inner box (display:table-cell).

3b: Inner box (display:table-cell) with margin-right 100px.

3c: Inner box (display:table-cell) with and padding-right of 100px.

3d: Inner box (display:table-cell) with margin-right and padding-right of 100px.

Giving the inner box display:table-cell fixes these examples like the previous set of examples.

Containers with display:table with width of 200px

Firefox Screenshot

IE8 Screenshot

Making sense of all this is interesting, what is duplicated and what is not?

4a: Inner box.

4b: Inner box with margin-right 100px.

4c: Inner box with and padding-right of 100px.

4d: Inner box with margin-right and padding-right of 100px.

Containers with display:table with width of 200px

The following examples establish what is actually happening.

Inner box with padding

The padding width is shown in the true box and is doubled in the created phantom box.

5a: Inner box with and padding-right of 50px.

5b: Inner box with and padding-right of 100px.

Inner box with border

The border width is shown to the side of the true box and is duplicated in the created phantom box. Note how the overall widths of example 6a. and 6b. are the same as the pervious examples with padding. This possibly explains the gap between the true border and duplicated border.

6a: Inner box with border-right of 50px.

6b: Inner box with border-right of 100px.

Inner box with margin

.

7a: Inner box with and margin-right of 50px.

7b: Inner box with and margin-right of 100px.

Other earlier test were display:table and display:table-cell.

Please also see this Test Case by Bruno Fassino.

Internet Explorer bugs

CSS test - Display table

Created on the 12th of March and upaded on the 14th of March 2008