IE8, direction and new block formatting contexts

Credit for the content of this page goes to Alan Gresley, indeed this is a derivation from his page IE8 bidi and hasLayout.

A block element with direction (rtl/ltr) different from the parent wrongly establishes a new block formatting context in IE8.

1a. Float Left
This wrapper has direction rtl which causes the wrapper to contain the float in IE8.

This should happen if the element had overflow with values other than visible such as auto, hidden or scroll (properties that establish a new block formatting context).

1b. Float Left
This wrapper has overflow:auto which causes the wrapper to contain the float. This is correct.

Testing that the cause of the new b.f.c. is the direction change from the parent block.

Float
An rtl div in a ltr parent. It establishes a new b.f.c.
Float
An inner div with rtl direction, as its parent. It doesn't establish a new b.f.c.
Float
A further inner div with ltr direction, different from its parent. It establishes a new b.f.c.
A sibling of the red bordered div, but with ltr direction, different from its parent. It establishes a new b.f.c.

Toggling direction by a hover transition produces sometimes a wrong effect: the content after the wrapper jumps up. This occurs only hovering from the top or the left and only on the first instance (this is reset by refreshing the page).

1c. Float Left
This wrapper has direction rtl changed to ltr on :hover

Toggling overflow by a hover transition produces sometimes a wrong effect: the content after the wrapper jumps up. This occurs only hovering from the top or the left and only on the first instance (this is reset by refreshing the page).

1d. Float Left
This wrapper has overflow:auto changed to visible on :hover

Toggling overflow by a hover transition produces sometimes a wrong effect: the content after the wrapper jumps up. This occurs only hovering from the top or the left and only on the first instance (this is reset by refreshing the page).

1e. Float Left
This wrapper has float:left changed to none on :hover

Toggling overflow by a hover transition produces sometimes a wrong effect: the content after the wrapper jumps up. This occurs only hovering from the top or the left and only on the first instance (this is reset by refreshing the page).

1e. Float Left
This wrapper has display:inline-block changed to block on :hover

In a page with default ltr direction, a block element with rtl direction establishes a new block formatting context in IE8.

Floats with a sibling element in normal flow

2a. Float Left
This block has direction rtl which causes it to be fully displaced by the float (not only its text content) in IE8.

This should happen if the element had overflow with values other than visible such as auto, hidden or scroll (properties that establish a new block formatting context).

2b. Float Left
This block has overflow:auto which causes it to be fully displaced by the float (not only its text content).

CSS tests home