This issue involves both jQuery Core and jQuery UI, yet I'm not sure which is causing the problem.

I'm using the latest version of Chrome.

I'm trying to build a button container that is sized perfectly to match the contained buttons. To do this, I'm using .outerWidth(), which works perfectly most of the time. However, as soon as I add a button with a label containing a space, .outerWidth() reports an incorrect value. Replacing a space with the html entity ( ) also works properly.

Example 1

var $button = $("<button />");

$button.html("Foo").button().outerWidth(); // Works, returns 128.

Example 2

var $button = $("<button />");

$button.html("Foo Bar").button().outerWidth(); // Fails, returns 81, is actually 128.

Example 3

var $button = $("<button />");

$button.html("Foo Bar").button().outerWidth(); // Works, Returns 128.