Question

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

<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和其他浏览器中它可以正常工作。

这有什么解决方案/解决方法吗？

Answer 1

您可以将图像设置为显示为块元素，这样可以删除空格。

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

Answer 2

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

删除图像与结束标记之间的所有空格。在图像前面看起来并不重要。

Answer 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设置了一个示例。

Answer 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中呈现的图像太大

4 个答案: