Question

我一直在尝试将HTML电子邮件模板放在一起工作，看起来很棒！ ...除了Outlook桌面客户端以外的所有内容。

我试图尽可能小心使用基于表格的布局，内联样式和所有其他常见的罪魁祸首。出于某种原因，我的Litmus / Acid on Acid测试都会以非常令人惊讶的结果返回Outlook，我不知道为什么。

整个部分周围的边框比应该的边缘更细，内部区域周围的边框完全缺失，按钮周围的边框也同样缺失！

我已将标记删除到以下相关代码段：

<!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 name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300" rel="stylesheet">
    <title>New Event Template Test</title>

</head>
<body bgcolor="#f8f8f8" style="background:#f8f8f8;margin:0;padding:0;"><a name="top" data-hs-link-id="0" target="_blank"></a>

<!-- framing wrapper -->
    <table background="#f8f8f8" style="border-collapse:separate; padding-top:38px" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tbody><tr><td width="100%" align="center" class="body__table" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
        <!--[if mso]>
        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper__table" background="#f8f8f8">
        <![endif]-->
        <!--[if !mso]><!-- -->
        <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate; background:#f8f8f8; max-width:600px" class="wrapper__table" background="#f8f8f8">
        <!--<![endif]-->
        <tbody><tr><td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">  

    <!-- hero -->
            <table width="100%" align="left" cellpadding="0" cellspacing="0" border="10" bordercolor="#ffffff" bordercolorlight="#ffffff" bordercolordark="#ffffff" class="hero__table" style="border-collapse:separate; background:#f5f7f6; border-left:10px solid #ffffff; border-right:10px solid #ffffff; border-top:10px solid #ffffff; border-bottom:0px solid #ffffff; border-color:#ffffff">
                <tbody><tr>
                    <td class="hero__content" background="" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
                        <table class="hero__content--table" width="100%" align="left" cellpadding="0" cellspacing="0" border="30" bordercolor="#F5F7F6" bordercolorlight="#F5F7F6" bordercolordark="#F5F7F6" background="#F5F7F6" style="border-collapse:separate; background:#f5f7f6; border:30px solid #f5f7f6">
                            <tbody><tr><td class="hero--subhead__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:17px">
                                <div class="hero--subhead" style="font-weight:bold; font-size:14px; line-height:21px; text-transform:uppercase; letter-spacing:1.5px"><span class="block-mobile">Webinar: </span>03/08 at 10:00AM - 12:00PM PST</div>
                            </td></tr>
                            <tr><td class="heroHeaderColumn" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:15px">
                                <h1 class="hero--header" style="font-size:36px; line-height:45px; margin:0"><div id="hs_cos_wrapper_hero_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></h1>
                            </td></tr>

                            <tr><td class="hero--button__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:47px; padding-bottom:37px">                             
                                                        <a class="email-button" style="text-transform:uppercase; letter-spacing:1.8px; font-size:14px; font-weight:bold; text-decoration:none; background-color:#252525; border-left:38px solid #252525; border-right:38px solid #252525; border-top:12px solid #252525; border-bottom:12px solid #252525; background:#252525; color:#FFFFFF" href="http://google.com" bgcolor="#252525" data-hs-link-id="0" target="_blank">This is a button</a>
                            </td></tr>

                        </tbody></table>
                    </td>
                </tr>           

                <tr><td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
                    <img class="hero__image" src="https://dummyimage.com/1160x676/cccbcb/252525.jpg&text=image" width="580" style="vertical-align:text-top; max-width:580px">
                </td>
              </tr></tbody>
          </table>


<!-- /framing wrapper -->
        </td></tr></tbody></table>
    </td></tr></tbody></table>

</body></html>

截图：

Outlook 2016（OS X） - 快乐！

Outlook 2007（Windows） - 我的边界去了哪里？

Answer 1

我稍微更改了你的代码并在Litmus中进行了测试，现在看起来它在前景中的边界问题上工作得很好。

您应避免将边框样式添加到表格标记中。相反，将它应用于周围的td。

另外，避免使用border =＆＃34; 30＆＃34;，只使用值0＆amp;这里应该使用1.

感谢，

json_decode($result, true);

Answer 2

您可以使用一种方法来确保电子邮件的结构能够在Outlook中正确显示。这有点麻烦，但值得花一点精力。我要做的是生成想要的HTML，然后将其保存到文件中。我在MS Word中打开了该文件（这并不奇怪，并且表行的大小完全错误）。然后，我像修改其他任何文档一样修改了Word中的外观，以使其显示了我最初想要的方式，然后保存了文件。我在文本编辑器中打开该文件，然后将Word生成的HTML结构复制到我的应用程序中-从中生成的电子邮件完全按照我希望的方式显示。

Outlook客户端无法正确呈现表格边框

Outlook 2016（OS X） - 快乐！

Outlook 2007（Windows） - 我的边界去了哪里？

2 个答案: