See the attached JSFiddle. The bottom float should be flush to the right. Changing the characters in the top right to English characters causes the float on the bottom row to be properly aligned.
Created attachment 99881 [details]
Thank you for the report!
It's better to have test cases actually attached than to link to external sites.
Confirmed with r90400. This is a regression from Safari 5.0.5.
Has there been any progress on this? This is a pretty bad regression because not only is the content misaligned, but it also doesn't fire click events.
Are there any known sites affected? That information would help prioritize investigation.
This affects Gmail mobile in CJK.
Looks like the CJK font has a larger descender, making the first float taller than a line, so its bottom is below the top of the second float (which originates on the second line).
Is there a patch coming? This also affects the newly-launched Gmail Offline such that stars cannot be clicked.
With the test case (attachment 99881 [details]), TOT WebKit behavior matches the layout in Firefox 3.6.22 and in Firefox 6.0.2 in OS X Lion. I think this is actually a WebKit progression and I see no reason to change the behavior.
I see this in FireFox as well, though I'm not convinced it is correct. Is it in the spec?
At the least there should be a workaround. How can I get the bottom line to float completely to the right?
(In reply to comment #10)
> I see this in FireFox as well, though I'm not convinced it is correct. Is it in the spec?
It is correct per the spec. Depending on how your browsers are configured (which default font ?), the issue will be more or less visible. The intrinsic line-height for the roman text (Times maybe, or Helvetica maybe ?) is narrower / smaller than the line-height for the Japanese text - Hiragino Kaku gothic has an intrinsic line-height of about 1.5em, Times about 1.15em, Helvetica 1.05em). The line-box generated for your first floated box is thus much taller than the ones for the Roman text.
> At the least there should be a workaround. How can I get the bottom line to float completely to the right?
Set the line-height ? or better 'clear:right' for the second float (basic things really)?
It doesn't help that WebKit does some hackery things with Helvetica and Times to have their (intrinsic) line-height match the one for Arial and Times New Roman - but that is still smaller than Jpn fonts.