Webkit Breaking Float Bug

This test page demonstrates a bug in WebKit. The words 'Breaking' and 'Float' render on one line in Internet Explorer, Firefox and Opera, but not in Safari and Chrome.

Breaking
Float

The markup for this bug scenario is:

<div class="outer">
	<span>Breaking</span>
	<div class="inner">Float</div>
</div>
		

The stylesheet for this bug scenario is:

.outer {
	float: left;
	background-color: yellow;
}

.inner {
	float: left;
	margin: 0 8px 0 0;
}
		

Migitating factors here are the outer container which must be floated to the left and the first of the two inner elements which must be an inline element. The bug name is a pun on the float implementation for this specific scenario being broken and the float breaking to the next line.

This bug has been reported: Bug 45274 - Breaking Float: floated block level element following inline element in floated container breaks to next line.

This bug has been documented on and may be discussed at my blog: WebKit Breaking Float Bug.

This bug seems to be related with: WebKit Overflowed Float Bug.