在 IE 中呈现过大图像的表格单元格答案

【问题标题】：Table cell with image rendered too large in IE在 IE 中呈现过大图像的表格单元格
【发布时间】：2010-12-02 15:31:57
【问题描述】：

我有以下简单的表格来重现该问题：

<TABLE>
  <TR>
    <TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
    <IMG 
      style="width: 24px; height: 68px; margin:0px; padding:0px; border:none" 
      src="Image24x68.png"> 
    </TD>
  </TR>
</TABLE>

图像实际上是 24x86 像素大。边框只是标记单元格的边界。没有分配给文档的 css 文件。

我希望单元格与图片一样大。

问题是：在任何 IE 版本（6、7、8）中，表格单元格总是被渲染得过高几个像素，而它在 Firefox 和其他浏览器中运行良好。

是否有任何解决方案/解决方法？

【问题讨论】：

标签： html css image internet-explorer html-table

【解决方案1】：

您可以将图像设置为显示为块元素，这应该会删除空间。

<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">

【讨论】：

这似乎是一个不错的解决方案，因为我可以将它放入 css 文件中。
是的，将它放入主 CSS 样式表当然是最好的 - 我只是将它内联添加以说明这一点。

【解决方案2】：

看起来像这样：http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/

删除图像和关闭 td 标记之间的所有空格。在图像面前似乎并不重要。

【讨论】：

哇。糟糕的。这确实解决了问题。但是很难确保图像后面没有空白，因为整个东西都是由一些（也很丑陋的）php代码创建的......

【解决方案3】：

我尝试了此页面上的所有其他解决方案：

使用display:block
删除<td> 标签中的空格（即我使用了<tr> 和<td> 标签，没有在它们之间放置任何空格）

使用

padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;

除了方法 (1)，这些在 IE 上都不起作用。把头发扯了三个小时后，我找到了更好的解决方案：在图像标签中添加hspace=0 属性。例如：

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
  class="ImageHeader" hspace="0">

我在http://www.PrintersRose.com 设置了一个这样的例子。

【讨论】：

【解决方案4】：

尝试以下方法：

<table>
  <tr>
    <td style="border: 1px solid black; font-size: 1pt;">
    <img style="width: 24px; height: 68px; margin: 0;
       padding: 0; border: 0" src="Image24x68.png" /> 
    </td>
  </tr>
</table>

（PS HTML 标签使用小写。）

【讨论】：

当我将页面存储到本地文件夹时，IE 实际创建的大写 HTML 标签。它将所有标签重写为大写...