一、为什么HTML邮件模板这么难搞？

每次做HTML邮件模板开发，总有种穿越回10年前的感觉。明明2023年了，还得用table布局、内联样式这些"古董"技术。最头疼的是，不同邮箱客户端就像不同星球的生物，Outlook、Gmail、苹果邮件各自为政，显示效果能差出十万八千里。

比如这个简单的按钮代码，在Outlook 2013上显示正常，到了Gmail就变成纯文本：

<!-- [技术栈：HTML/CSS] -->
<!-- 错误示例：现代CSS写法在邮件中失效 -->
<button style="border-radius: 5px; padding: 10px 20px; background: #1a73e8; color: white;">
  点击领取优惠券
</button>

二、破解兼容性的四大法宝

1. 用表格代替div布局

邮件客户端对CSS的支持参差不齐，但表格(table)布局的兼容性最好。看这个正确示例：

<!-- [技术栈：HTML/CSS] -->
<!-- 正确示例：表格布局保证兼容性 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" bgcolor="#f8f9fa" style="padding: 20px;">
      <!-- 内容容器 -->
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="border-radius: 5px; padding: 10px 20px; background: #1a73e8;">
            <a href="#" style="color: white; text-decoration: none; font-family: Arial, sans-serif; font-size: 16px; display: block;">
              点击领取优惠券
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

2. 内联样式是王道

外部CSS和