1

我有这个简单的表格，其中最后一行显示图像按钮旁边的文本。这在 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 在表格单元格中将文本一直显示到右侧，图像按钮在其下方并且也向右对齐。我想显示图像按钮左侧的“信息：”文本，这在其他浏览器中可以正常工作。

4

4 回答 4

2

我相信如果你只是删除浮动你会没事的。

于 2012-07-04T08:28:58.427 回答
0

If you apply style="vertical-align:middle;" to the input (and remove the float) this should work in IE.

I've tried this in all versions of IE and ever quirks and it works so I'm not sure why it wouldn't for you see below for code:

style: .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>

于 2012-07-04T09:00:47.963 回答
0

it is better to put a your info text in label tag<label>info<label/> this will work for IE7

于 2012-07-04T09:49:59.653 回答
0

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

您可以尝试在 td 上添加“white-space:nowrap”样式。

于 2012-07-04T09:23:18.870 回答