首页 > 解决方案 > 在电子邮件模板的 CSS 样式方面需要帮助

问题描述

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

下面是我的 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>

我在系统中预览时的输出: 系统预览电子邮件

收到 Outlook 后,我收到的电子邮件如图所示Outlook 电子邮件

标签: htmlcss

解决方案


您的代码没有任何大错误,请妥善安排您的代码。表格数据颜色未显示,因为样式属性未消耗。在您的代码中,您将样式标签单独放置,请将您的样式标签移动到头标签中。该代码将正常工作。

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


推荐阅读