在电子邮件模板的 CSS 样式方面需要帮助答案

【问题标题】：Need help on CSS Styling for Email Template在电子邮件模板的 CSS 样式方面需要帮助
【发布时间】：2019-11-13 02:13:20
【问题描述】：

我设计了一个电子邮件模板，我们将用于我们的一位客户。当我从系统预览中看到它时，我能够看到颜色，但一旦收到电子邮件，格式已设置但颜色不可见，它显示为黑白照片，正文中没有任何颜色。

下面是我的 CSS 代码：

<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;">&nbsp;<img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style><!--
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;

}
td.bg2{
color:black;
}
--></style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span>&nbsp;</span></span></p>

我在系统中预览时的输出： System Preview Email

一旦收到 Outlook，我收到的电子邮件如图所示Outlook Email

【问题讨论】：

您是否尝试过将背景颜色样式设为内联样式而不是使用 css 类？
没有。你能帮我看看 sn-p 的例子吗？
刚刚改成这样：<td class="bg1" 像这样将样式内联：<td style="background-color:#E2E2E3;color:#00629F;"

标签： html css

【解决方案1】：

您的代码没有大错，请合理安排您的代码。表格数据颜色未显示，因为样式属性未消耗。在您的代码中，您将样式标签单独放置，请将您的样式标签移动到头标签中。代码可以正常工作。

<head>
   <style>
      table {
      font-family: cambria;
      }
      td.bg1{
      background-color:#E2E2E3;
      color:#00629F;
      }
      td.bg2{
      color:black;
      }
   </style>
   </head
<body>
   <p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;">&nbsp;<img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
   <style>
   </style>
   <table style="width: 100%;">
      <tbody>
         <tr>
            <td style="height: 40px;" colspan="5">
               <p>Click here to view Incident: ${URI_REF}</p>
            </td>
         </tr>
         <tr>
            <td class="bg1" colspan="5">Short Description</td>
         </tr>
         <tr>
            <td class="bg2" colspan="5">${short_description}</td>
         </tr>
         <tr>
            <td class="bg1" colspan="5">Description</td>
         </tr>
         <tr>
            <td class="bg2" colspan="5">${description}</td>
         </tr>
      </tbody>
   </table>
   <hr />
   <p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
   <p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span>&nbsp;</span></span></p>
</body>

【讨论】：

@AbdulAzeez 对您没有帮助请提供投票，这将有助于其他人确定有用的答案