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



我正在创建一封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>

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

最新更新