【问题标题】: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 就是 &lt;!DOCTYPE html&gt; 这导致几乎所有浏览器都采用标准模式。完成后,您只需进行一些小的调整(例如图像边框)即可确保完全合规。

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

    【讨论】:

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

    &lt;table&gt; 元素的 HTML 错误。您缺少第二组 &lt;td&gt;&lt;/td&gt; 标记。

    此外,&lt;p&gt;&lt;/p&gt; 会在您的文本标题上方和下方放置一些空间。 (编辑:虽然&lt;p&gt; 元素具有内置的顶部/底部边距,但&lt;p&gt; 并没有导致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】:

    可能是&lt;p&gt; 标签在图像之后和文本之前为您提供了空间?

    【讨论】:

    • 它不是

      标签。删除段落后,空格仍然存在

    【解决方案4】:

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

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

    【讨论】:

    • 为什么要使用表格?为什么不这样做:&lt;p&gt;Para with lots of text&lt;/p&gt;&lt;p&gt;&lt;img /&gt;&lt;/p&gt;
    • 虽然我同意将 &lt;p&gt; 块放在表格中并不是最好的方法,但您的声明 “它只是将它放在表格上方。” 在技术上是不正确。表格单元格内的&lt;p&gt; 将保留在表格单元格内。
    • @Sparky672,你是对的。我想我只是想说,使用应该使用的表格,或者使用几个

      标签。混合它们可能很麻烦。

    • 是的,&lt;table&gt; 元素应该用于表格数据和用于布局的 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 @ 在怪癖模式下,所有的赌注都没有了,你受浏览器开发人员的摆布,由于盒子模型和默认值的差异,通常需要各种技巧来使事情看起来一样。严格来说,您实际上只需要关注两个主要标签:图像和溢出。
    猜你喜欢
    • 2021-03-17
    • 2015-11-16
    • 2014-04-06
    • 2013-12-19
    • 1970-01-01
    • 2010-11-02
    • 2021-04-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多