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

【问题标题】：Sendgrid email renders differently on Gmail and Microsoft OutlookSendgrid 电子邮件在 Gmail 和 Microsoft Outlook 上的呈现方式不同
【发布时间】：2018-09-04 07:30:46
【问题描述】：

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

【问题讨论】：

标签： html css html-email sendgrid

【解决方案1】：

如果它必须在 Outlook 中工作，您不能在电子邮件中使用标准 css3。

Outlook 正在使用 Microsoft Word 的 HTML 渲染引擎（可悲，但确实如此）。

关于如何让电子邮件在（所有）客户中发挥作用，有很多令人惊奇的提示和技巧。

这里只是一个查看链接：

【讨论】：