IE7 将文本与表格单元格中的按钮对齐

Question

我有一个简单的表格，其中最后一行在图像按钮旁边显示文本。这在除IE7以外的其他浏览器中运行良好。

<table>
    <tr>
      <td>Some header</td>
      <td>Some other header</td>
    </tr>            
    <tr>
      <td colspan="2" class="infoRow">Info:
      <input type="image" class="infoButton" src="Images/down_arrow.png" /></td>
    </tr>
</table>

从 CSS 文件：

.infoButton
{
    float: right;
    padding: 0;
    margin-left: 20px;
}
.infoRow
{
   text-align: right;
}

IE7 在表格单元格中一直向右显示文本，图像按钮位于其下方，也与右侧对齐。我想显示图像按钮左侧的"信息："文本，这在其他浏览器中工作正常。

Answer 1

我相信

如果你只是删除浮点数，你会没事的。

Answer 2

我在IE7中看到左侧的文本和右侧的按钮。

您可以尝试在td上添加"white-space：nowrap"样式。

Answer 3

最好将您的信息文本放在标签标签中<label>info<label/>这将适用于IE7

Answer 4

如果您将style="vertical-align:middle;"应用于输入（并删除float），这应该在IE中工作。

我已经在所有版本的IE中尝试过这个并且曾经有过怪癖并且它可以工作，所以我不确定为什么它不适合您，请参阅下面的代码：

风格： .infoButton {vertical-align:middle;padding:0;margin-left:20px;} label {vertical-align:middle;} .infoRow{text-align:right;}

.html： <td class="infoRow" valign="middle"><label>Info:</label><input type="image" class="infoButton" src="Images/down_arrow.png" /></td>