Outlook邮件圆角按钮CSS：解决深色模式下颜色失控问题

我用VML方案实现的Outlook圆角按钮在浅色模式显示正常，但深色模式里fillcolor属性不受控制，按钮被黑色覆盖层挡住，没法显示预期的奶油色。现有代码如下：

<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
  <tr>
    <td class="content" align="left" style="background-color: #EFE9D9;  font-family: 'Inter', Arial, sans-serif; padding-top:40px; padding-bottom: 40px;">
      <table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
        <tr>
          <td class="content" align="left" style="background-color: #EFE9D9; font-family: 'Inter', Arial, sans-serif">           
            <!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" 
              href="cnn.com" 
              title="cnn" 
              style="height:68px;v-text-anchor:middle;width:340;margin-left:25px; margin-right:25px;" 
              arcsize="58.82352941176471%" stroke="f" fillcolor="#181818"><w:anchorlock/>
              <center>
            <![endif]-->
            <a href="%%=v(@Button_URL)=%%" class="dark-button button-td-primary" title="%%=v(@Button_title)=%%" alias="%%=v(@Button_alias)=%%" 
            style="text-decoration:none;
                  color:#EFE9D9;
                  background-color:#181818;
                  border-radius:40px;
                  border-top:0px;
                  font-weight:600;
                  border-right:0px;
                  border-bottom:0px;
                  border-left:0px;
                  padding-top:15px;
                  padding-bottom:15px;
                  font-family:'Inter', Arial, sans-serif;
                  font-size:16px;
                  text-align:center;
                  mso-border-alt:none;
                  word-break:keep-all;
                  mso-shading: transparent">
              <span style="padding-left:25px;
                padding-right:25px;
                font-size:16px;
                display:inline-block;
                letter-spacing:normal;
                word-break: break-word;">
                  Click me to visit cnn
              </span>
            </a>
            <!--[if mso]></center></v:roundrect><![endif]-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

可行解决方案 #

1. 给VML标签添加mso-color-alt属性

Outlook深色模式会自动反转部分颜色，添加这个属性可以强制指定深色模式下的填充色，避免被改成黑色。在<v:roundrect>标签里加入mso-color-alt="#EFE9D9"（替换成你需要的奶油色）。

2. 统一VML和HTML链接属性

原代码中VML的href是固定值cnn.com，和a标签的动态变量不一致，修正为相同的动态变量，避免跳转异常。

3. 补充VML样式的mso-shading

在VML的style中添加mso-shading:#181818;，确保浅色模式下的填充色正常生效。

修改后的完整代码 #

<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
  <tr>
    <td class="content" align="left" style="background-color: #EFE9D9;  font-family: 'Inter', Arial, sans-serif; padding-top:40px; padding-bottom: 40px;">
      <table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
        <tr>
          <td class="content" align="left" style="background-color: #EFE9D9; font-family: 'Inter', Arial, sans-serif">           
            <!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" 
              href="%%=v(@Button_URL)=%%" 
              title="%%=v(@Button_title)=%%" 
              style="height:68px;v-text-anchor:middle;width:340;margin-left:25px; margin-right:25px;mso-shading:#181818;" 
              arcsize="58.82352941176471%" stroke="f" fillcolor="#181818" mso-color-alt="#EFE9D9"><w:anchorlock/>
              <center>
            <![endif]-->
            <a href="%%=v(@Button_URL)=%%" class="dark-button button-td-primary" title="%%=v(@Button_title)=%%" alias="%%=v(@Button_alias)=%%" 
            style="text-decoration:none;
                  color:#EFE9D9;
                  background-color:#181818;
                  border-radius:40px;
                  border-top:0px;
                  font-weight:600;
                  border-right:0px;
                  border-bottom:0px;
                  border-left:0px;
                  padding-top:15px;
                  padding-bottom:15px;
                  font-family:'Inter', Arial, sans-serif;
                  font-size:16px;
                  text-align:center;
                  mso-border-alt:none;
                  word-break:keep-all;
                  mso-shading: transparent">
              <span style="padding-left:25px;
                padding-right:25px;
                font-size:16px;
                display:inline-block;
                letter-spacing:normal;
                word-break: break-word;">
                  Click me to visit cnn
              </span>
            </a>
            <!--[if mso]></center></v:roundrect><![endif]-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

额外备选方案 #

如果上述方法仍无效，可以尝试用背景图片制作按钮（仅针对Outlook），虽然会增加邮件体积，但兼容性更强；另外确保邮件使用HTML5 doctype，能提升Outlook对样式的解析效果。

内容的提问来源于stack exchange，提问作者Joel Lapidus