html - IE 中的图像宽度不合适

Question

在我的 html 中，表格显示了一条红线。在 Firefox 中，我得到了正确的线路。但在 IE 中，该行的行高增加了。如下图所示。

<table width="100%" align="center" border="0" cellSpacing="0" cellPadding="0" summary="">
<tr>
<TD style="BACKGROUND-COLOR: red"><IMG alt="" src="myImage.gif" width=1 height=1>
</TD>
</tr>
</table>

在火狐中：

在 IE 中：

为什么会发生这种情况或我该如何解决。

Answer 1

我认为最好将css样式border-bottom：1px solid应用于这一行。

<table style="width: 100%; text-align: center;" cellSpacing="0" cellPadding="0">
    <tr>
        <td>some column</td>
    </tr>
    <tr>
        <td style="height: 1px; line-height: 1px; border-bottom: 1px solid red; background: transparent;"><!-- border --></td>
    </tr>
</table>

现场示例：http: //jsfiddle.net/6jVvQ/6/

Answer 2

将此样式添加到您的表格行：

<tr style="height:1px; font-size:1px; line-height:1px;">
    <TD style="BACKGROUND-COLOR: red"><IMG alt="" src="myImage.gif" width=1 height=1>
    </TD>
</tr>

不过，这并不是鼓励内联样式。使用外部样式表！

看看这个演示

Answer 3

尝试这个

<table width="100%" align="center" border="0" cellSpacing="0" cellPadding="0" summary="">
    <tr>
        <td  style="height:1px; line-height:1px; background-color: red">
            <img alt="" src="myImage.gif" width="1px" height="1px" />
        </td>
    </tr>
</table>

Answer 4

我建议一个不同的解决方案。您不必为此任务使用表格。您可能想使用div或hr

它的代码更少，更容易：示例

被认为已弃用的表格（在使用它们设置布局样式时）并且您应该尽可能避免内联样式。如果您仍然使用表格，请尝试像这样设置它们的样式：

<table class="clean-table">
...
</table>

和CSS：

.clean-table{
    width: 100%;
    border-spacing: 0px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}