在 Outlook.com 上查看 HTML 电子邮件时的空格答案

【问题标题】：Whitespace when viewing HTML email on Outlook.com在 Outlook.com 上查看 HTML 电子邮件时的空格
【发布时间】：2014-11-21 15:15:24
【问题描述】：

我正在构建一个 html 电子邮件，方法是在 Photoshop 中拼接一个批准的设计，然后手动编码。该电子邮件在 Outlook 和 Gmail 中看起来都很棒，但在 Outlook.com 中却不行。

我试过了：

在样式标签中设置 p.mso 类的样式将我的图像嵌套在 div 中并将它们设置为图像的高度。行高：50%；关于一切。（把它拿掉，其他两个电子邮件客户端就可以了）使 td 标签与图像的高度相同。

没有任何效果，我的所有图像都在底部填充，破坏了布局。

HTML如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>this is placeholder</title>
</head>
<body bgcolor="#eee" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0; top:0;">
<style type="text/css">
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
    p.ecxMsoNormal, .ecxMsoNormal { line-height:0px; margin:0px; padding: 0px; display: none; }
</style>
<center>
    <table id="Table_01" style="display:block; background-color: #fff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600" border="0" cellpadding="0" cellspacing="0" col="3">
        <tr>
             <td valign="top" align="left" width="600" colspan="3" style="padding: 0px; margin: 0px; line-height: 50%;">
                <img src="images/email_01.png" alt="" width="600"/>
            </td>
        </tr>
        <tr>
             <td valign="top" align="left" width="29" colspan="1" style="padding: 0px; margin: 0px; line-height: 50%;">
                <img src="images/email_02.png" alt="" width="29"/>
            </td>
            <td valign="top" align="left" width="542" colspan="1" style="background-color: #f3f3f4; padding: 0px; margin: 0px; line-height: 50%;" height="172">
                <img src="images/email_03.png" alt="" align="right" width="133" height="172"/>
                <p style="font-family: 'Arial', 'Helvetica', sans-serif; text-align:left; font-size:14px; line-height:21px; background-color:#f3f3f4; color: #6d6e71;padding: 0px; margin: 0px; width: 409px; height:172px;">
                    We are delighted to attach the inaugural <span style="color: #004281; font-weight:bold; font-size:16px;">this is placeholder</span><br/>this is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholder
                    <br/><br/>
                    <span style="color: #f6861f; font-weight:bold; font-size: 18px;">this is placeholder</span>
                </p>
            </td>
            <td valign="top" align="left" width="29" colspan="1" style="padding: 0px; margin: 0px; line-height: 50%;">
                <img src="images/email_04.png" alt="" width="29"/>
            </td>
        </tr>
        <tr>
             <td valign="top" align="left" width="600" colspan="3" style="padding: 0px; margin: 0px; line-height: 50%;">
                <img src="images/email_05.png" alt="" width="600"/>
            </td>
        </tr>
    </table>
</body>
</html>

有人知道解决办法吗？我已经厌倦了在互联网上搜索一个。谢谢。

【问题讨论】：

我们能看到你的 html 中发生这种情况的部分吗？
我已经添加了上面的html，希望对您有所帮助。谢谢！

标签： email padding html-email outlook.com

【解决方案1】：

尝试将 line-height:0; 添加到您的 p 和/或 span 类中，它为我解决了问题。

span {padding:0;margin:0;line-height:0;} p {padding:0;margin:0;line-height:0;}

【讨论】：

【解决方案2】：

尝试将style="display:block;" 添加到图像标签中。

这也可能与 TD 上的 line-height:50%; 有关，因为 Outlook.com 的行高规则非常糟糕。

http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

^ 他们忽略了这一点，但要使行高修复工作，您必须将内容包装在 <div class="ExternalClass">

【讨论】：