我正在创建一封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中看到的图像底部会留下不必要的空间。我怎样才能摆脱这个空间?
这不是一个bug或类似的东西。
根据使用的doctype,不同的浏览器将特定值应用于各种元素的边距、填充和边框。
查看您的代码,我看不出您在哪里将图像上的边框设置为0。这样做。
一般来说,最好使用的doctype只是<!DOCTYPE html>
。这导致几乎所有浏览器都采用标准模式。一旦你做到了,你只需要做一些小的调整(比如图像边界)来确保完全符合要求。
接下来,TR中的段落标记是无效的。正如Sparky672所指出的,您缺少一个TD。
<table>
元素的HTML是错误的。您缺少第二组<td></td>
标记。
此外,<p></p>
会在文本标题的上方和下方留出一些空间。(编辑:尽管<p>
元素具有内置上/下边距这一技术上正确的说法,但<p>
并没有引起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>
是<p>
标签在图像之后和文本之前给了您空间吗?
为什么table
内部有<p>
?它只会把它放在桌子上方。IE可能正在显示空的CCD_ 10。您的<p>
周围可能需要一个<td>
当你根本不使用桌子,只显示图像时会发生什么?
我认为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>
是的,这很难看,但这也是为什么表格不是布局设计的首选方法的部分原因。希望这对你有用。