Outlook 2007/2010 向 HTML 电子邮件添加随机换行符/空格答案

【问题标题】：Outlook 2007/2010 adds random line breaks/white space to HTML E-MailOutlook 2007/2010 向 HTML 电子邮件添加随机换行符/空格
【发布时间】：2012-05-05 06:00:32
【问题描述】：

**编辑，该问题仅存在于 Outlook Web App 的预览窗格中**

我几乎尝试了所有方法，但似乎无法消除 Outlook 2007/2010 在屏幕右侧的预览框中呈现的空格/换行符。当您双击收件箱列表中的电子邮件时，HTML 会完美加载。但是，当它显示在拆分收件箱列表/电子邮件预览窗口中时，会产生换行符/空格。

我已经尝试了书中的每一个技巧。 border-collapse、border=0、display:block、cell-spacing/cell-padding:0、!important 等。没有任何效果。

这就是我要抱怨的。（为了隐私，我把所有东西都涂黑了）：

209.67.20.161/email/linebreaks.png
209.67.20.161/email/linebreaks2.png
209.67.20.161/email/linebreaks3.png

这可能是本文中提到的“打印页限制（Microsoft Word）”：

www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010

但是，我不这么认为，因为有些换行符彼此非常接近。

顺便说一句，我正在 Photoshop 中对图像进行切片并保存到网络设备。

这是切片图像：http://209.67.20.161/email/slices.png

做我的救命恩人……

链接到我的 HTML：http://209.67.20.161/email/email_sliced_forss.html

您可以使用 ctrlq.org/html-mail 将 HTML 电子邮件发送到您自己的 Outlook 收件箱，并在选择 HTML 编辑器后将我的 HTML 源复制并粘贴到框中。

【问题讨论】：

我从未在 html 电子邮件中使用 leftmargin topmargin。你应该删除它们，而且我还认为你有一个不必要的 td 高度，因为图像有它自己的高度。您也可以删除 td 高度。

标签： outlook whitespace html-email outlook-2007 line-breaks

【解决方案1】：

像这个例子一样为您的 html 电子邮件设置样式，它将在所有主要客户中完美呈现，即使是像 lotus notes 这样的旧客户。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>

<style media="all" type="text/css">
table td
{
border-collapse: collapse;
}
</style>
    </head>

    <body>
    <table width="680" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="20" align="left" valign="top" rowspan="2" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:170px;">&nbsp;</td>
            <td width="300" height="170" rowspan="2" align="left" valign="top">
                <img src="another image" alt="" width="300" height="170" border="0"></td>
            <td width="33" align="left" valign="top" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:140px;">&nbsp;</td>
            <td width="327" colspan="2" align="left" valign="top" bgcolor="#FFFFFF" style="font-size: 14px; font-family: arial; color:#5D5B5C; line-height: 16px;">some exemple text here</td>
        </tr>
        <tr>
            <td width="33" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:30px;">&nbsp;</td>
            <td width="138" height="30" align="left" valign="top"><a href="some link here" target="_blank"><img src="image here" alt="details" width="138" height="30" border="0"></a></td>
            <td width="189" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:30px;">&nbsp;</td>
        </tr>
    </table>
    </body>
    </html>

这是另一个帖子的链接，我在该帖子中解释了如何使用空 TD 单元格而不是垫片。 HTML Emails - Empty Tables/TR/TD as spacers

【讨论】：

【解决方案2】：

尝试在<td>中使用style="line-height:your-image-size px;"；另外，在图片标签内使用style="display:block;"

【讨论】：