html - TD 的表格和空格的 IE 错误？

Question

我有一个使用表格的页面，在 FF 等中它工作完美，但在 IE7 中它会导致问题，它基本上是四个 Angular 有 td 和 img(它是圆 Angular 形式)的地方..如果我删除它修复了文档中的空白。实际发生的是它弄乱了表格。它在包含 2 个 Angular 的上部 tr 和下一个 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 会将额外的空格添加到单元格的底部，以说明文本可能带有 decenders(例如 g、y、p 等)。将 img 标签设置为显示为 block 元素可以解决这个问题。不再有丑陋的空白!

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

希望对您有所帮助!