Martijn Traa from Mindcontrolled.nl brought to my attention a bug in WebKit that seems to be related to the WebKit Breaking Float Bug I blogged about earlier.
Scenario
This bug involves a floated block level element containing inline elements. Spans inside a div in this case but it seems this is generic. All inline elements have a margin- or padding-left or -right greater than zero and the first inline elements contains some nested inline elements.
This is the HTML markup for this bug scenario:
<div class="outer"> <span><b><i>Web</i>Kit</b></span> <span>Overflowed</span> <span>Float</span </div>
This is the stylesheet:
.outer {
float: right;
}
.outer span {
margin-left: 20px;
}
This is the expected result:
WebKit Overflowed Float
This is the actual result:
WebKit Overflowed
Float
Suggested fix
It seems a number of fixes are possible. The one that should have least impact on the design is floating the inline elements (spans in this case) to the left.
Repro and bug report
I created a demonstration page on my personal web space for this bug. Martijn had already reported it on the WebKit bug tracker.
UPDATE
I just tested my demonstration page with Chrome 26.0.1410.43 m and it is now displaying correctly. From visiting the bug tracker it seems that a related bug was fixed which probably also fixed this one. Great! Reporting bugs helps (even though it can be a long wait)!
Stijn de Witt 
Thanks for the mention 🙂 I’m sure the report will get the attention it deserves in the next weeks.
I have an even more bizarre case.
in stylesheet.css:
.outer{
float:left;
}
.outer input{
float:left;
}
html:
The button changes the href attribute of the stylesheet in my head tag.
When the page first renders, it looks (as expected) like
[input] [submit]
[button]
but if you click the button twice, which restores the stylesheet, it looks like
[input]
[submit]
[button]
This happens even if you put an explicit width on .outer!!
Sorry, html did not post. I shall attempt to escape my angle-brackets.
<div class=”outer”>
<input type=”text” />
<input type=”submit” />
</div>
<input type=”button” onclick=”toggleStylesheet()” />
The current workaround for this bug is the silliest line of jQuery I have written, since refreshing the page with the appropriate cookie will restore the format:
if($.browser.webkit)
{
window.location = window.location;
}