TD 表格和空格的 IE 错误？

Posted 2023-03-05

【中文标题】TD 表格和空格的 IE 错误？

【英文标题】：IE bug with TD's tables and whitespace?

【发布时间】：2010-11-02 20:57:42

【问题描述】：

我有一个使用表格的页面，在 FF 等中它运行良好，但在 IE7 中它会导致问题，基本上是四个角有一个 td 和 img （它是一个圆角形式）.. 如果我删除文档中的空白可以解决问题..实际发生的是它弄乱了表格..它在包含两个角的上 tr 和下一个 tr 之间放置了一条细白线

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

这是一个简单的例子..

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

如您所见，img 和 td 之间有空格...我将其删除，因此看起来像这样：

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

问题消失了，（注意 td 和 image 是紧挨着的）

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

任何想法都非常感谢。

【参考方案1】：

事实证明，删除空格并不是修复它的唯一方法。其他人现在可能已经明白了这一点，但我想我会在这里添加它，以便为下一个偶然发现这个烦人问题的可怜人提供完整性。

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

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

希望有帮助！

【讨论】：

这太棒了！谢谢！不再需要和空格打架了！

【参考方案2】：

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

更重要的是，你应该停止制作像 2001 年那样的网站。:)

【讨论】：

是的，它是一个网站编辑，它不会是我决定使用表格进行布局...但目前我只有在我转换它之前...感谢您的回复..

【参考方案3】：

我已经修复了在表格结束之前添加这个：

<tr>
<td ><img src="pixel.gif"   ></td>
</tr>

希望对您有所帮助。

【参考方案4】：

这让我发疯了一段时间 - 在 Intranet 网站上从 IE 8.0 迁移到 IE 9.0 - 所有图像下方突然出现了一些空白。

在图像上设置 display:block 为我做了。

【参考方案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。

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

将hspace=0 属性添加到图像标记。例如：

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

这就是诀窍。

【参考方案6】：

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

【参考方案7】：

从我记事起，所有版本都是这样。

就我自己而言，除了将图像和 td 放在同一行之外，我从未找到其他方法，但我从未真正看过 - 可能有一种方法我错过了。我想我只是养成了精简它们的习惯。

【参考方案8】：

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

使用 css 将 td 宽度/高度设置为图像宽度/高度 将图像设置为 td 的背景

喜欢：

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

对我有用 :)

（对不起我的英语：">）

【参考方案9】：

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

td *  line-height: normal; 

【参考方案10】：

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