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>

在Firefox中：

在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>

但这并不是为了鼓励内联风格。使用外部样式表！

查看 DEMO

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

代码更少且更简单：example

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

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

CSS：

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