Question

我有用户Freemarker模板来实现电子邮件设计。我一直有问题，标题和footer.ftl模板样式在不同的电子邮件客户端中不一致，尤其是outlook。我已经厌倦了进行css更改以适应产品所有者请求的任何新更改。在展望中，客户徽标扩展太多，导致其他领域发生变化。以下是模板的外观但在展望中它看起来像

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

          <!--[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

由于您将电子邮件发送到不同的电子邮件客户端，我建议您使用表格来发送电子邮件，因此可以更加可靠地显示预期的电子邮件。关于您的代码，请参阅How to handle different data types with same attribute name with Gson?某些属性不支持所有电子邮件客户端，我相信您可以通过这种方式简化代码：

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

如果您使用表格：

div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}

我没有测试这些代码，这是我想做的事情。

我希望有所帮助。

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

1 个答案: