标题内的浮动按钮

我试图在表格的标题内创建一个按钮。它既适用于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; }

来源

2011-08-11 Samuel Lindblom

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

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

http://jsfiddle.net/hgNdK/

来源

2011-08-11 11:45:05 thirtydot

完美的作品，谢谢！ –

如果你的“版本”位是float: left;，它在IE6和IE7中的工作原理是明智的。我还在该按钮上设置了display: inline;，因为您正试图使其显示在线。它不应该由于浮动有所不同，但它更符合语义正确，它可能有助于某些浏览器。

这里有一个jsFiddle展示解决方案。

来源

2011-08-11 11:45:06 Spycho

这也适用于IE7。 – thirtydot

谢谢@thirtydot。我认为这个解决方案在语义上比重新排序按钮和文本更合适。它使它们保持与实际出现的顺序相同。另外，通过重新排序解决方案，不知道为什么会这样的人可能会出现并“修复”它，导致问题再次出现。 – Spycho

这完全是事实，尽管其实际重要性有多大是值得商榷的。顺便说一下，在您的解决方案中，“Caption”完全隐藏在WebKit浏览器中。你需要包含漂浮物（现在不重要，但为了将来的参考）。 – thirtydot

标题内的浮动按钮

回答

相关问题