HTML 引用电子邮件中的样式

Question

我正在发送邮件报告（使用 sendgrid），但我遇到了样式问题。收到的电子邮件在 Gmail 客户端中正确显示，但是当我尝试转发或回复此电子邮件时，样式会损坏。

收到的电子邮件如下所示（很好）：

当我尝试转发时，引用邮件的样式显示损坏：

如何管理 html 中的样式以避免此问题？

提前致谢！此致

Answer 1

您必须内联您的 CSS 样式，而不是像在网络上正常 HTML 那样链接样式表，因此它们是 HTML 标记的一部分。每个元素都需要在 style 属性中包含其相关样式，如下所示：

<table>
  <tr>
    <td align="center">
      <h1 style="font-family: Arial, sans-serif; font-size: 24px; line-height: 1.3; font-weight: bold; color: blue;">
        Your email title
      </h1>
      <p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333333;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus varius ligula, eget dignissim dui ultrices vel. Nunc blandit turpis et sapien tincidunt, sed placerat ipsum convallis. Duis vel aliquet mi. In a ullamcorper nunc, in lobortis libero. Phasellus accumsan consectetur felis nec sodales.
      </p>
      <a style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 40px; height: 40px; color: red; height: 40px; background: white; border: 2px solid red; text-decoration: none;">
        A link button
      </a>
    </td>
  </tr>
</table>

希望对您有所帮助。

HTML 引用电子邮件中的样式

HTML styles in quoted emails

html

css

email

sendgrid