Question

**编辑，此问题仅存在于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

可能是＆＃34;打印页面限制（Microsoft Word）＆＃34;本文中提到的那些：

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 editer后复制并粘贴我的HTML源代码。

Answer 1

在这个示例中设置您的HTML电子邮件的样式，它将在所有主要客户中完美呈现，甚至包括莲花笔记等旧客户。

    <!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

Answer 2

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

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

2 个答案: