Gmail - HTML 类和样式标签在表格中被删除答案

【问题标题】：Gmail - HTML classes and style tags are removed inside tableGmail - HTML 类和样式标签在表格中被删除
【发布时间】：2020-09-29 20:28:19
【问题描述】：

我的电子邮件模板包含html elements 的类，并且在表格中添加了style 标记。表格的 CSS 自定义是使用类选择器完成的。

在 Gmail 网页版中进行测试时，样式未应用，并且类和样式在呈现的 DOM 中不可用。（虽然它在 Outlook 中运行良好）

是否有来自 Google 的文档表明他们会去除 html 类和样式标签？

此外，如果 Gmail 出现这种情况，请提出任何替代解决方案。请不要建议内联css，因为我们使用jsp 模板并且内容是动态呈现的。

示例 html 模板：

<table class="layoutTable">
   <tbody>
      <tr>
         <td class="layoutLeft" rowspan="3"></td>
         <td class="layoutTop"></td>
         <td class="layoutRight" rowspan="3"></td>
      </tr>
      <tr>
         <td class="layoutBody">
            <style type="text/css">BODY {
               FONT-SIZE: 70%; FONT-FAMILY: inherit; COLOR: #000000
               }
               TEXTAREA {
               FONT-SIZE: 70%; FONT-FAMILY: inherit; COLOR: #000000
               }
               BODY {
               FONT-SIZE: 14px; FONT-FAMILY: "Helvetica", Arial, sans-serif; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #f8f8f8
               }
            </style>
            <table class="tableEmailText" cellspacing="0" cellpadding="0" border="0">
               <tbody>
                  <tr>

Gmail 中呈现的 DOM：

<table>
   <tbody>
      <tr>
         <td rowspan="3">
         </td>
         <td>
         </td>
         <td rowspan="3">
         </td>
      </tr>
      <tr>
         <td>
            <table border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <th>

【问题讨论】：

将 CSS 移到文档的头部就可以了。
移到头上不起作用（我在头上）！我只是看起来，因为 gmail 删除了 TD 中的类条目并仅应用设置为 TD 的类，因此这适用于 iOS 和 Outlook。如果格式设置为样式，则字体大小和系列等其他属性将在其他平台上重置。 -> 感谢谷歌！

标签： html email gmail html-email email-templates

【解决方案1】：

Gmail 有不同的版本，但它会剥离嵌入式 CSS 是很常见的。您必须重构代码以内联样式。见HTML email in Gmail - CSS style attribute removed Why is Gmail blocking CSS in emails?或Styles not working in Gmail

【讨论】：