从Salesforce发送至Outlook的HTML邮件背景色丢失问题求助

从Salesforce发送标准HTML格式邮件时，发送前HTML中的背景色显示正常，但邮件送达Outlook后背景色无法正常显示。

效果对比 #

• 发送前：
• 发送后（Outlook中）：

原使用代码（Salesforce LWC模板） #

<template>
  <div class="slds-p-around_x-large html-content" style=" padding: 20px 40px ;">
    <h1>GeeksforGeeks</h1>
    <h2>Placing div within a div</h2>
    <div style="background-color:rgb(195, 217, 237);width:73%;text-align:center;padding:7px;">
      <div style="background-color:#cc3353;width:50%;text-align:center;padding:2px;">
        <h3 style="font-size:2vw;">Example of div inside a div.</h3>
        <p style="font-size:2vw;">It has background color = #cc3353.</p>
        <p style="font-size:2vw;">This is some text in a div element.</p>
      </div>
    </div>
  </div>
  <lightning-button
    variant="brand"
    label="Send Email"
    title="Primary action"
    onclick={handleSubmit}
    class="slds-m-left_x-small">
  </lightning-button>
</template>

解决方案 #

Outlook（尤其是桌面端）对现代CSS的支持非常有限，不认可<div>上的background-color样式，必须改用表格布局+老式HTML属性+兼容代码来实现：

核心修改要点 #

1. 用<table>替代<div>构建布局：Outlook对表格的渲染兼容性远高于div
2. 同时添加bgcolor属性和内联background-color样式：bgcolor适配Outlook，background-color适配其他邮件客户端（如Gmail、网页版Outlook）
3. 发送邮件时只提取纯邮件内容HTML：去掉LWC的<template>和<lightning-button>标签，这些属于组件代码，不能作为邮件内容发送

修改后的邮件内容代码示例 #

<div class="slds-p-around_x-large html-content" style="padding: 20px 40px;">
  <h1>GeeksforGeeks</h1>
  <h2>Placing div within a div</h2>
  <!-- 外层容器替换为table -->
  <table width="73%" cellpadding="7" cellspacing="0" bgcolor="rgb(195, 217, 237)" style="background-color:rgb(195, 217, 237);text-align:center;">
    <tr>
      <td>
        <!-- 内层容器替换为table -->
        <table width="50%" cellpadding="2" cellspacing="0" bgcolor="#cc3353" style="background-color:#cc3353;text-align:center;">
          <tr>
            <td>
              <h3 style="font-size:2vw;">Example of div inside a div.</h3>
              <p style="font-size:2vw;">It has background color = #cc3353.</p>
              <p style="font-size:2vw;">This is some text in a div element.</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

进阶：兼容复杂背景（如纯色/渐变） #

如果需要确保Outlook桌面端100%显示背景，可嵌入VML（微软专属矢量标记语言）代码做兜底：

<div class="slds-p-around_x-large html-content" style="padding: 20px 40px;">
  <h1>GeeksforGeeks</h1>
  <h2>Placing div within a div</h2>
  <table width="73%" cellpadding="7" cellspacing="0" style="text-align:center;">
    <tr>
      <td>
        <!-- VML适配Outlook桌面端背景 -->
        <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%;height:100%;">
          <v:fill type="solid" color="rgb(195, 217, 237)" />
          <v:textbox inset="0,0,0,0">
        <![endif]-->
        <div style="background-color:rgb(195, 217, 237);">
          <table width="50%" cellpadding="2" cellspacing="0" style="text-align:center;">
            <tr>
              <td>
                <!--[if mso]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%;height:100%;">
                  <v:fill type="solid" color="#cc3353" />
                  <v:textbox inset="0,0,0,0">
                <![endif]-->
                <div style="background-color:#cc3353;">
                  <h3 style="font-size:2vw;">Example of div inside a div.</h3>
                  <p style="font-size:2vw;">It has background color = #cc3353.</p>
                  <p style="font-size:2vw;">This is some text in a div element.</p>
                </div>
                <!--[if mso]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
              </td>
            </tr>
          </table>
        </div>
        <!--[if mso]>
          </v:textbox>
        </v:rect>
        <![endif]-->
      </td>
    </tr>
  </table>
</div>

内容的提问来源于stack exchange，提问作者Roger Holland