Freemarker 电子邮件页脚样式在所有电子邮件客户端中不一致

Question

我有用户 Freemarker 模板来实现电子邮件设计。我一直遇到页眉和页脚.ftl 模板样式在不同的电子邮件客户端中不一致的问题，尤其是 Outlook。我厌倦了为了适应产品所有者要求的任何新更改而进行 css 更改。在 Outlook 中，客户端徽标扩展过多，导致其他字段发生变化。下面是模板的样子 但在前景中它看起来像这样

有没有更好的解决方案？有比 Freemarker 更好的库吗？电子邮件被发送到不同的设备和电子邮件客户端。我需要一些可以相应调整的东西。 谢谢！， 样式="背景颜色：透明；">

          <!--[if (mso)|(IE)]><td align="center" width="685" style=" width:685px; padding-right: 0px; padding-left: 0px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top" ><![endif]-->
        <div class="col num12" style="min-width: 320px;max-width: 685px;width: 685px;width: calc(36500% - 249340px);background-color: transparent;">
          <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;"><!--<![endif]-->
            <div style="background-color: transparent; display: inline-block!important; width: 100% !important; ">

             <div style="border-collapse: collapse;display: table;background-color:transparent;min-width: 320px;max-width: 685px;width: 685px;width: calc(36500% - 249340px);">
      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 575px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->

          <!--[if (mso)|(IE)]><td align="center" width="383" style=" width:383px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; " valign="top"><![endif]-->
        <div class="col num8" style="display: table-cell;vertical-align: top;min-width: 340px;max-width: 396px;">
          <div style="background-color: #646c82; width: 100% !important; text-align: right;">
          <!--[if (!mso)&(!IE)]><!--><div class="container" style="text-align: right;"><!--<![endif]-->
            <div style="display: inline-block;vertical-align: middle;">
              <img alt="Image" title="Company Logo" style="vertical-align: middle; padding-right: 10px; padding-top: 20px; padding-bottom: 20px;" src="${contextUrl}/common/images/ht_logo_white.png">
             </div>

          <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
          </div>
        </div>
          <!--[if (mso)|(IE)]></td><td align="center" width="192" style=" width:192px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
        <div class="col num4" style="display: table-cell;vertical-align: top;max-width: 300px;min-width: 168px; vertical-align: middle;">
          <div style="background-color: transparent; width: 100% !important; color: #646c82">
          <!--[if (!mso)&(!IE)]><!--><div style="padding-top:5px; padding-bottom:5px; padding: 0px;"><!--<![endif]-->

             <p style="margin: 0;font-size: 10px;text-align: center">
                <strong><span style="color: #646C82; font-size: 10px; font-weight: bold;">Ergopoint &copy; 2011-2018</span></strong><br>
             </p>
                <p style="margin: 0;font-size: 10px;text-align: center; font-weight: 400; line-height: 5px;">&nbsp;</p>
                <p style="margin: 0;font-size: 10px;font-weight: 100; text-align: center">
                    <strong><span style="color: #646C82; font-size: 10px; font-weight: 400;">Humantech, Inc.</span></strong>
                </p>
                <p style="margin: 0;font-size: 10px;font-weight: 100;text-align: center">
                    <strong><span style="color: #646C82; font-size: 10px; font-weight: 400;">1161 Oak Valley Drive</span></strong>
                </p>
                <p style="margin: 0;font-size: 10px; font-weight: 100; text-align: center">
                    <strong><span style="color: #646C82; font-size: 10px; font-weight: 400;">Ann Arbor, MI&nbsp;</span></strong>
                </p>

          <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
          </div>
        </div>
      <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
    </div>


         </div>
       <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
     </div>
   <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
 </div>

Answer 1

由于您将电子邮件发送给不同的电子邮件客户端，我建议您使用表格制作电子邮件，它们更可靠地显示预期的电子邮件。关于您的代码，请参阅 link 某些属性并不支持所有电子邮件客户端，我相信您可以通过这种方式简化代码：

 <div style="width: 650px;">
   <div style="width: 100%; background-color: #646c82; text-align: center; height: 25px; color: #fff;">HEADER</div>
   <div style="width: 100%;text-align: center; padding: 10px 0">BODY</div>
   <div style="width: 100%;text-align: center; height: 25px; color: #646c82;">FOOTER</div>
 </div>

如果你使用表格：

    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="650">
      <tr>
        <td style="width: 100%; background-color: #646c82; text-align: center; height: 25px; color: #fff;">
          HEADER
        </td>
      </tr>
      <tr>
        <td style="height: 30px">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td style="width: 100%;text-align: center;">
          BODY
        </td>
      </tr>
        <tr>
        <td style="height: 30px">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td style="width: 100%;text-align: center; height: 25px; color: #646c82;">
          FOOTER
        </td>
      </tr>
    </table>

我没有测试这些代码，这是我会做的一个想法。

希望对你有所帮助。