Floating button inside caption

I am trying to create a button inside the caption of a table. It works in both Firefox and Chrome, but not IE 7 (The most used browser for my userbase). IE 7 creates the button on a new line below instead of floating it to the right.

Here is the (simplified) html

<table>
   <caption>
      Versions
      <button class="inline-button">Add</button>
   </caption>
   <tr>
      <th>Name</th>
      <th>Description</th>
   </tr>
   <tr>
      <td>10.0</td>
      <td>Oompa-loompa</td>
   </tr>
   <tr>
      <td>10.0</td>
      <td>Oompa-loompa</td>
   </tr>
</table>

Here is the css:

button.inline-button {
    float: right;
    border: 1px solid gray;
    margin: 0;
}

table { width: 300px; }

caption { backgr开发者_如何学Pythonound: #ddd; }

As is usual (for IE7) one simple solution is to switch the order of the text and the button:

<caption>
   <button class="inline-button">Add</button>
   Versions
</caption>

http://jsfiddle.net/hgNdK/

If you float: left; the "Versions" bit, it works sensibly in IE6 and IE7. I also set display: inline; on the button, because you are trying to make it display in-line. It shouldn't make any difference because of the floating, but it more semantically correct, and it may help in certain browsers.

Here's a jsFiddle demonstrating the solution.