Question

我在Sendgrid上创建了一个标准电子邮件模板，在不同设备上的Gmail上进行了测试，效果很好，直到尝试使用Outlook，所有的CSS和图像都消失了。那么根本原因是什么？

这是我的html代码：

<div style="font-family: 'Poppins', Helvetica, sans-serif;">
  <div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
    <img src="image.png" 
      style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
  </div>

  <div style="padding: 10px; text-align: center;">
    <img src="image.png" 
      style="width: 40px; height: auto; margin-bottom: 16px;">
    <p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
  </div>

  <div>
    <div style="padding: 16px; color: black;">
      <p>Hi -Name-,</p>
      <p>Welcome.</p>
      <p>Please confirm your email-address by clicking the button below.</p>
    </div>

    <div style="text-align: center; padding-bottom: 15px;">
      <a href="-EmailConfirmUrl-" target="_blank">
        <button style="border: none; cursor: pointer; background: #2840ff;
          color: white; width: 200px; height: 48px; text-transform: uppercase; 
          font-size: 0.8rem; outline-style: none; 
          background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
          Verify Email Now
        </button>
      </a>
    </div>

    <div style="text-align: center; background: #2840ff; color: white;
      background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
      <img src="image.png" 
        style="height: 20px; width: 160px;">
        <p style="color: #ced4da; font-weight: 300;">
          Copyright © 2018. All rights reserved.
        </p>  
      </div>
    </div>
</div>

Answer 1

如果必须在Outlook中运行，则不能在电子邮件中使用标准的CSS3。

Outlook正在使用Microsoft Word的HTML呈现引擎（很遗憾，但确实如此）。

关于如何使电子邮件在（所有）客户端中运行的方法，有很多惊人的技巧和窍门。

这里只是视图链接：

Sendgrid电子邮件在Gmail和Microsoft Outlook上的呈现方式有所不同

1 个答案: