Question

我正在创建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中看到图像底部会留下不必要的空间。我该如何摆脱这个空间呢？

Answer 1

<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>

Answer 2

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

根据使用的doctype，不同的浏览器会将特定值应用于各种元素的边距，填充和边框。

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

一般来说，使用的最佳doctype只是<!DOCTYPE html>这导致了几乎所有浏览器的标准模式。一旦你有了这个，你需要做的只是一些小的调整（如图像边框），以确保完全符合。

接下来，TR内部的段落标记无效。 Sparky672指出，你错过了一个TD。

Answer 3

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

Answer 4

为什么内有table？它只是把它放在桌子上面。 IE可能显示空<tr></tr>。您<td>

周围可能需要

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

Answer 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在图像后留下不必要的空间

5 个答案: