邮件模板CSS在Yahoo/Outlook等客户端不生效问题排查请求

核心问题根源 #

Outlook（Windows原生版）、Yahoo这类邮件客户端对CSS的支持极其有限：

• Outlook Windows版完全忽略<style>标签内的类选择器，只识别内联样式；
• Yahoo仅支持部分基础类选择器，对响应式属性、复杂样式兼容性极差；
• HTML5标签（如<main>）在多数传统邮件客户端中无法被正确解析，样式直接失效。

你的代码里的具体问题 #

1. 类选择器完全无效：你用.wrapper、.main、.card这类类选择器定义的样式，Outlook根本不会读取，Yahoo也大概率忽略。
2. HTML5标签<main>兼容性差：邮件客户端不识别<main>标签，其包裹的样式无法生效，必须换成通用的<table>标签。
3. 间距实现不可靠：用空<tr>加类设置高度（如.spacing-one），Outlook会自动压缩空行，导致间距丢失。
4. 属性支持受限：border-radius在Outlook Windows版中完全不生效；max-width的支持不稳定，需要用固定宽度+内联样式兜底。
5. 按钮样式缺失且实现不合理：代码里的.main-button没有定义样式，且用<span>做按钮容器，在邮件客户端中样式无法稳定渲染。

针对性修正方案 #

1. 全部样式改用内联写法

把所有需要生效的样式直接写在元素的style属性里，这是Outlook唯一认可的方式：

<table style="width: 100%; table-layout: fixed; background-color: #ebeff5;">
  <table style="background-color: #ebeff5; margin: 0 auto; width: 100%; max-width: 750px; padding: 35px 15px;">
    <tr>
      <td style="padding: 20px; background-color: #ffffff;">
        <!-- 内容 -->
      </td>
    </tr>
  </table>
</table>

2. 替换HTML5标签为table

把<main class="wrapper">换成<table>，确保所有客户端能正确解析容器：

<table style="width: 100%; table-layout: fixed; background-color: #ebeff5;">
  <!-- 内部内容table -->
</table>

3. 可靠的间距实现

用<td>的内联padding或者空<td>加height属性来设置间距，不要依赖空行：

<!-- 替代.spacing-one -->
<tr>
  <td style="height: 15px; font-size: 15px; line-height: 15px;">&nbsp;</td>
</tr>

4. Outlook特殊样式处理（如圆角）

如果需要圆角效果，用Outlook专属的条件注释+VML实现（因为Outlook不支持border-radius）：

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{url}}" style="height:56px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fill="t">
  <v:fill type="tile" color="#your-color" />
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:sans-serif;font-size:16px;">Reset Password</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="{{url}}" style="background-color:#your-color;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:56px;text-align:center;text-decoration:none;width:200px;">Reset Password</a>
<!--<![endif]-->

5. 字体兼容性优化

为font-family添加多个兜底字体，避免客户端找不到指定字体时显示乱码：

<p style="font-size: 20px; color: #39506f; line-height: 30px; font-family: 'Source Sans Pro', Arial, sans-serif;">text.</p>

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