HTML / CSS:表单元格与形象在IE渲染过大

我有以下简单的表来重现问题:

<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和其他浏览器。

是否有任何解决方案/解决方法吗? 多谢

--------------解决方案-------------

您可以设置显示为块级元素的图片,这应该删除的空间。

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

如下所示:http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/

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

我尝试了所有这个页面上的其他解决方案:

  1. 使用display:block
  2. 在删除空格<td>标签(即我用<tr><td>标签,而不把它们之间的任何空白)
  3. 运用

    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。

请尝试以下操作:

<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标记小写)。

分类:HTML 时间:2015-03-15 人气:5
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.691 (s). 10 q(s)