图片宽度在IE中不合适

在我的html表格中显示一条红线。在Firefox中，我正确地获得了该行。但在IE中，这条线的高度已经增加了。在下面的图片中显示。图片宽度在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：

enter image description here

在IE中： enter image description here

这究竟是为什么或如何能解决这个问题。

来源

2013-05-14 NaaN

尝试'TD {边界崩溃：崩溃}' – Morpheus 2013-05-14 08:47:11

我错过了什么？ – George 2013-05-14 08:55:42

尝试使用.png而不是.gif .gif文件的大小有时会导致浏览器无法加载图像。 – 2013-05-14 09:24:30

我认为这是更好地应用CSS样式边框底：1px的固体为此行。

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

来源

2013-05-14 09:18:29

添加这个样式应用到表行：

<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

来源

2013-05-14 08:46:39 George

试试这个

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

来源

2013-05-14 08:51:15

我提出一个不同的解决方案。您不必为此任务使用表格。您可能需要使用div或hr

这是更少的代码，更容易：example

表考虑弃用（与他们的造型布局时），你也应该避免内联样式，你可以尽可能多的。如果您正在使用表反正尝试他们的风格是这样的：

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

而CSS：

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

来源

2013-05-14 09:13:33

图片宽度在IE中不合适

回答

相关问题