IE在图像后留下不必要的空间答案

【问题标题】：IE leaving unnecessary space after imageIE在图像后留下不必要的空间
【发布时间】：2011-09-06 12:48:35
【问题描述】：

我正在创建一个 HTML 电子邮件

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
  <img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
 </td> 
</tr>
<tr>
 <p>Para with lots of text</p>
</tr>
</table>

但是，在 Internet Explorer 中查看时，图像底部会留下不必要的空间。我怎样才能摆脱这个空间？

【问题讨论】：

标签： css internet-explorer html-table html-email

【解决方案1】：

这不是错误或类似的东西。

根据使用的文档类型，不同的浏览器会为不同元素的边距、内边距和边框应用特定的值。

查看您的代码，我看不到您将图像上的边框设置为 0 的位置。执行此操作。

一般来说，最好使用的 doctype 就是 <!DOCTYPE html> 这导致几乎所有浏览器都采用标准模式。完成后，您只需进行一些小的调整（例如图像边框）即可确保完全合规。

接下来，TR 中的段落标签无效。正如 Sparky672 指出的那样，您缺少 TD。

【讨论】：

我遇到了类似的问题。为了解决这个问题，我按照你说的做了：添加了“”。接下来，我在中添加了 line-height CSS 规则，不需要的垂直空间根据需要消失了。

【解决方案2】：

<table> 元素的 HTML 错误。您缺少第二组 <td></td> 标记。

此外， 会在您的文本标题上方和下方放置一些空间。（编辑：虽然 元素具有内置的顶部/底部边距，但 并没有导致OP 的问题）

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
        </td> 
    </tr>
    <tr>
        <td>
             Para with lots of text
        </td>
    </tr>
</table>

【讨论】：

删除
后，空间仍然存在。
@user1212- 这可能是真的，但是 P 标签有一个内置的顶部和底部边距，除非你用 CSS 删除它。因此，即使您仍然有其他原因导致您的问题，我的回答也包含了技术上正确的陈述。修复表格的 HTML 怎么样？

【解决方案3】：

可能是 标签在图像之后和文本之前为您提供了空间？

【讨论】：

它不是
标签。删除段落后，空格仍然存在

【解决方案4】：

为什么在table 中包含？它只是要把它放在桌子上方。 IE 可能显示的是空的<tr></tr>。您可能需要在您的  周围添加一个 <td>

当您根本不使用表格而只显示图像时会发生什么？

【讨论】：

为什么要使用表格？为什么不这样做：Para with lots of text<img />
虽然我同意将  块放在表格中并不是最好的方法，但您的声明 “它只是将它放在表格上方。” 在技术上是不正确。表格单元格内的 将保留在表格单元格内。
@Sparky672，你是对的。我想我只是想说，使用应该使用的表格，或者使用几个
标签。混合它们可能很麻烦。
是的，<table> 元素应该用于表格数据和用于布局的 CSS。

【解决方案5】：

我相信 IE 有一个错误，即当图像放置在表格中时，它会在图像后插入不必要的空间。尝试删除标签之间的所有空格：

<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="image.jpg" width="x" height="y" /></td></tr>
<tr>
 <td><p>Para with lots of text</p></td>
</tr>
</table>

是的，它很丑，但这也是为什么表格不是布局设计的首选方法的部分原因。希望这对你有用。

【讨论】：

我知道空格应该被忽略，因此是错误。或者，如果您愿意，是问题还是奇怪？...我们知道 IE 充满了这些。我不知道这是否仍然出现在最新版本的 IE 中，但肯定是旧版本。
@Sparky672：取决于文档类型/浏览器。但是，这仍然不是正确答案，因为它不是错误。
几乎所有的渲染差异都归结为不正确的 doctype 使用加上对各种模式之间差异的无知：严格、几乎严格、怪癖……您可能想要查看：@987654321 @ 在怪癖模式下，所有的赌注都没有了，你受浏览器开发人员的摆布，由于盒子模型和默认值的差异，通常需要各种技巧来使事情看起来一样。严格来说，您实际上只需要关注两个主要标签：图像和溢出。