Vertical position of Floats in the middle of text

In each of the two tests below there are three spans inside a container: a red, a green and a blue one. The middle one (green) is floated (left in the first case, right in the second.) Changing browser width the lines wrap differently and is possible to check how the browsers position the float. According to the rules governing the positioning of floats, in particular rules 6 and 8, it should be possible to see the top of the green box aligned with the top of the last red line. The specs also say:

“ If there's a line box, the top of the floated box is aligned with the top of the current line box. If there isn't enough horizontal room for the float, it is shifted downward … if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float … and vice versa for rtl and right floats. ”

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. Text just before the float ---> Float Lorem ipsum dolor sit amet <--- Text just after the float. Morbi consequat mauris vitae leo. Ut egestas dui at odio. Proin a ligula nec mi posuere tincidunt. Suspendisse neque nulla, pharetra sit amet, convallis ut, dictum nec, augue. Nullam sed turpis. Sed tincidunt fermentum leo. Nulla est metus, venenatis sagittis, vulputate quis, hendrerit non, dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. Text just before the float ---> Float Lorem ipsum dolor sit amet <--- Text just after the float. Morbi consequat mauris vitae leo. Ut egestas dui at odio. Proin a ligula nec mi posuere tincidunt. Suspendisse neque nulla, pharetra sit amet, convallis ut, dictum nec, augue. Nullam sed turpis. Sed tincidunt fermentum leo. Nulla est metus, venenatis sagittis, vulputate quis, hendrerit non, dui.

According to the specification mentioned above, this vertical positioning of the float is correct:

But not all browsers behave in this way. Some always position the float below the current line box, even when there is room, producing in the same conditions of the previous screen shot:

Browsers allowing the top of the float aligned with the top of the current line box: Opera6+, Safari, Firefox 3.5+, IE8.
Browsers positioning the top of the float always below the current line box: IE7-/Win, Firefox 3.0-.

In the following case the (red) element preceding the (green) float is a block element. Now all browsers consistently align the top of the float with the bottom of that block (even when there is space for the float to go higher,) according to floats' rule 4.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Text just before the float --->
Float Lorem ipsum dolor sit amet <--- Text just after the float. Morbi consequat mauris vitae leo. Ut egestas dui at odio. Proin a ligula nec mi posuere tincidunt. Suspendisse neque nulla, pharetra sit amet, convallis ut, dictum nec, augue. Nullam sed turpis. Sed tincidunt fermentum leo. Nulla est metus, venenatis sagittis, vulputate quis, hendrerit non, dui.

CSS tests home