Question

我有一个页面正在使用表格，在FF等它工作完美，但在IE7它会导致问题，它基本上四角有一个td和img（它的圆角形式）..如果我删除它解决问题的原因是实际发生的事情是它弄乱了桌子......它在上面的tr之间放了一条细白线，它保持着2个角落和下一个tr

我需要删除img和TD之间的空格，是否有更好的解决方法，因为我有很多，不仅如果我重新格式化文档，问题就会返回..

这是一个简单的例子..

   <table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
            style="margin: 0px; padding: 0px">
            <tr>
                <td width="12" align="left" valign="top">
                    <img src="content/images/corner_left.gif" width="12" height="12" />
                </td>

你可以看到img和td之间有空格......我把它删除所以它看起来像这样：

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

问题消失了，（注意td和图像是彼此相邻的）

任何想法，我尝试设置各种css，填充0px，边距0px等...

任何想法都非常感激。

Answer 1

事实证明，删除空格并不是修复它的唯一方法。其他人可能已经想到了这一点，但我想我会在这里添加它，以便完成下一个可怜这个讨厌的问题的可怜的灵魂。

基本上，您不必担心标记中的空格。相反，添加style =“display：block;”到img标签。由于图像是内联元素，并且标记中有空格，因此IE会在单元格的底部添加额外的空格，以说明带有下划线的文本（例如g，y，p等）的可能性。将img标记设置为显示为块元素可以解决此问题。没有更丑陋的空白！

归功于这个人：http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved，这是我找到答案的地方。猜猜他是从谷歌讨论小组或其他人那里得到的。

希望有所帮助！

Answer 2

“修复它”的唯一方法（我松散地使用该术语）是remove the whitespace。

更重要的是，你应该停止制作类似2001年的网站。：）

Answer 3

我已经修复了在表格结尾之前添加的内容：

<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>

希望得到这个帮助。

Answer 4

这让我疯了一会儿 - 在内部网站点上从IE 8.0移动到IE 9.0 - 所有图像突然在它们下方留下了一些空白区域。

设置显示：图像上的块为我做了。

Answer 5

我尝试了以上所有解决方案：

a）尝试了display：block

b）删除了td标签中的空格（即我使用了tr和td标签，它们之间没有空格。）

c）我尝试使用：

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

解决方案a）工作。解决方案b）和c）不适用于IE。

但我发现的最佳解决方案是：

向Image标记添加hspace=0属性。例如：

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

这就是诀窍。

Answer 6

IE发现TD内部有文本内容（图像除外），所以它给它的文本line-height。尝试为TD设置height和overflow: hidden。

Answer 7

这是我记忆中的所有版本。

对于我自己来说，我从来没有找到另一种方式，而不是把图像和td放在同一条线上，但我从来没有真正看过 - 可能有一种我错过的方式。猜猜我养成了精简它们的习惯。

Answer 8

其他（和最好:)）解决方案是：

使用css
将图片设置为td的背景

像：

<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>

它适用于我：）

（对不起我的英文：“＆gt;）

Answer 9

另一个迟到的回复，但您也可以使用line-height: 0;删除空白。要确保文本仍然可读，您可以将其包装在另一个元素中，并使用line-height: normal或您选择的其他值。

td * { line-height: normal; }

Answer 10

我在Internet Explorer上使用Intranet站点也遇到此问题，因此我关闭了Intranet站点的兼容性视图模式来修复它：

TD的表和空白的IE错误？

10 个答案: