Alignment problem with jquerymobile and bold text – only on PC with Chrome

The following html and css works fine on most browsers, but try it on Chrome on a PC:

	<link rel="stylesheet" href="" />
	<script src=""></script>
	<script src=""></script>

	<style type="text/css">
		.detail { display: block; }
		.detail .fieldname { font-weight: bold; float: left; }
	<div class='detail'>
		<div class='fieldname'>Name:</div><div>Mr Smith</div>
		<div class='fieldname'>Phone:</div><div>xxxx-xxxx</div>

There is an alignment problem on Chrome on a PC.  Not on Chrome on a Mac, and not on IE on a PC – just Chrome on a PC.  You’ll see the word Phone starts under Mr Smith, instead of under Name.  (I am using the latest version of Chrome as I write this, 23.0.1271.64 m.)

This seems to be a strange interplay between the the bold text and jquery mobile. If you switch off either of these things, it works fine.

In fact there is a simple work-around: change font-weight: bold to font-weight: 600.  It won’t be quite as bold (which is weight 700), but hopefully it will be close enough.

All very mysterious!