Электронная почта Sendgrid по-разному отображается в Gmail и Microsoft Outlook - PullRequest
Новая
       38

Электронная почта Sendgrid по-разному отображается в Gmail и Microsoft Outlook

0 голосов
/ 04 сентября 2018

Я создаю шаблон на 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>

1 Ответ

0 голосов
/ 04 сентября 2018

Вы не можете использовать стандартный css3 в своих электронных письмах, если он должен работать в outlook.

Outlook использует движок HTML-рендеринга Microsoft Word (грустно, но верно).

Существует множество удивительных советов и приемов о том, как заставить электронную почту работать на (всех) клиентах.

Вот только ссылки для просмотра:

...