Table cell with image too large in IE

Question

I have the following simple table to reproduce the problem:

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

The image actually has a size of 24x86 pixels. A border is intended only to indicate cell boundaries. There is no css document assigned to the document.

I want the cell to be as big as the image.

The problem is that the table cell is always rendered a few pixels too high in any version of IE (6, 7, 8), while it works fine in Firefox and other browsers.

Is there any solution / workaround for this?

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/

td. .

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