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

如果您将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>

Answer 3

我在IE7中看到了左边的文字和右边的按钮。

您可以尝试添加＆＃34; white-space：nowrap＆＃34;到了td。

Answer 4

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

IE7对齐表格单元格中按钮旁边的文本

4 个答案: