Hotmail 和 Gmail 中的时事通讯 html 表中的行之间的间距

Posted

技术标签:

【中文标题】Hotmail 和 Gmail 中的时事通讯 html 表中的行之间的间距【英文标题】:Spacing between row in newsletter html table in Hotmail and Gmail 【发布时间】:2012-02-24 23:21:39 【问题描述】:

我尝试创建时事通讯。

显示在网络浏览器上很完美,在 Thunderbird 中也很完美......但在 Gmail 或 Hotmail 等网络邮件中......我在行之间有空格。

这是我的代码:

<center><a href="http://www.itbag.fr/newsletter/03022012/" style="color:#E84691;font-size:10px;">Si la newsletter s'affiche mal, consultez la en ligne</a>
<table id="Table_01"   border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_01.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <a href="https://www.facebook.com/Itbag.fr?sk=app_128552947241828" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_02.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:74px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_03.jpg"   border="0" ></a></td>
    <td colspan="2" rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sacs-d-occasion-de-marques/1130-sac_24h_gerard_darel_en_python_neuf.html" style="display:block;height:286px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_04.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
</tr>
<tr>
    <td rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1114-cabas_burberry_beige.html" style="display:block;height:258px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_05.jpg"   border="0" ></a></td>
    <td rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/accessoires-co/1128-expresso.html" style="display:block;height:258px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_06.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
</tr>
<tr>
    <td colspan="2" rowspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr/accessoires-co/1107-ballerines_heritage.html" style="display:block;height:313px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_07.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
</tr>
<tr>
    <td align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1118-peekaboo.html" style="display:block;height:227px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_08.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1120-muse_two_large.html" style="display:block;height:227px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_09.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/mon-compte" style="display:block;height:40px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_10.jpg"   border="0" ></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
</tr>
<tr>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif"   ></td>
    <td></td>
</tr>
</table></center> 

这里是直接链接:http://www.itbag.fr/newsletter/03022012

这里有两张在Gmail和Hotmail中显示的截图:

谁能帮帮我?

【问题讨论】:

【参考方案1】:

供将来参考:请记住,同一 tr 内的 td 必须具有相同的顶部和底部填充。 发生这种情况是因为您在一些 td 中添加了一些空间,而另一个获得了空间而不是样式(仅添加到您定义的空间),请也为它们添加填充。

边框也可能发生。

【讨论】:

【参考方案2】:

如下所述添加style="display: block"

<img style="display: block" src="sample.gif"  />

还有添加

img  display: block 

请参阅the original post。

【讨论】:

【参考方案3】:

我用

解决了类似的问题
<td style="line-height:0"><img ... /></td>

Found on this Q&A,我还不能通知潜在的重复。

【讨论】:

这也解决了我的问题。我总是使用 display:block 但有一封随机电子邮件无法使用。线高固定它。谢谢。 这是解决方案 - 网络邮件软件在邮件的 HTML 源代码中添加了额外的空格。这个额外的空白会导致表格单元格“之间”的间隙。间隙不在细胞之间。但是添加的空白使细胞生长。【参考方案4】:

我猜这个网络邮件没有真正的答案......

我在这个来源:http://www.campaignmonitor.com/css/ 中看到所有网络邮件和读者都理解“浮动”...

所以在未来,尝试使用浮动列。

【讨论】:

以上是关于Hotmail 和 Gmail 中的时事通讯 html 表中的行之间的间距的主要内容,如果未能解决你的问题,请参考以下文章

iPad Gmail 帐户时事通讯中的空白间隙

时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时

使用 Python 从 Gmail 中提取信息

苹果邮件中的css字体大小比gmail(iphone)小

Telnet、Hotmail 和 Gmail 连接失败

multipart/mixed 不适用于雷鸟和 hotmail 但 Gmail