Question

我正在构建一个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>

有人知道修复吗？我厌倦了在互联网上搜索一个。感谢。

Answer 1

尝试将line-height:0;添加到您为其解决的p和/或span类中。

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

Answer 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">

在Outlook.com上查看HTML电子邮件时的空白

2 个答案: