Buttons in header do not always display as inline

Buttons in header do not always display as inline

The documentation says " Each button is typically an  anchor  element, but any valid  button markup  will work. To save space, buttons in toolbars are set to  inline styling  so the button is only as wide as the text and icons it contains. " but that does not always seem to be true. I have this markup:


  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>jQuery Mobile button test</title>
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  7.     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  8.     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.   </head>
  11.   <body>
  12.     <div data-role="page">
  13.       <div data-role="header">
  14.         <h1>Messages
  15.         </h1>
  16.         <button type="button">Button</button>
  17.       </div>
  18.       <div data-role="content">
  19.         Stuff
  20.       </div>
  21.     </div>
  22.   </body>
  23. </html>


And it seems like the button is taking up the full width of the header. I tried adding "data-inline='true'" to the button and it made it shrink to fit the text but it is still on a separate line. I am able to work around this problem by using an "a" element instead of a button but I am still wondering if this is a bug. I have included a screenshot showing what it looks like.

I only notice this in the stable release (1.1.1). I tried the alpha of 1.2.0 and I don't notice the problem. Is there any chance that this will be fixed in 1.1.1?