Question

我正在尝试在表格的标题内创建一个按钮。它适用于Firefox和Chrome，但不适用于IE 7（我用户群最常用的浏览器）。 IE 7在下面的新行上创建了按钮，而不是将其浮动到右侧。

这是（简化的）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>

这是css：

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

table { width: 300px; }

caption { background: #ddd; }

Answer 1

与往常一样（对于IE7），一个简单的解决方案是切换文本的顺序和button：

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

http://jsfiddle.net/hgNdK/

Answer 2

如果你float: left;“版本”位，它在IE6和IE7中合理地工作。我还在按钮上设置display: inline;，因为您试图让它显示在线。由于浮动，不应该产生任何差异，但它在语义上更正确，并且在某些浏览器中可能会有所帮助。

这是展示解决方案的jsFiddle。

标题内的浮动按钮

2 个答案: