0

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

有谁知道修复？我已经厌倦了在互联网上搜索一个。谢谢。

4

2 回答 2

1

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

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

于 2014-12-10T14:24:59.837 回答
0

Try adding style="display:block;" to the image tags.

It might also have to do with the line-height:50%; you have on the TDs, since Outlook.com has pretty terrible line-height rules.

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

^ They leave this out, but for the line-height fix to work you have to wrap your content in <div class="ExternalClass">

于 2014-11-21T19:39:40.183 回答