必须用<table>而非<div>写按钮，因Outlook（尤其Windows桌面版）忽略display: inline-block、flex及部分padding，而<table>跨客户端渲染稳定；Gmail App仅支持有限CSS，<table>是唯一能保障按钮尺寸与居中效果的方案。
为什么用 <table> 而不是 <div> 写按钮
因为 Outlook（尤其是 Windows Desktop 版）会直接忽略 display: inline-block、flex 甚至部分 padding，但对 <table> 渲染稳定。Gmail App（Android/iOS）也只支持有限的 CSS，<table> 是目前唯一能跨客户端保持按钮尺寸和居中效果的方案。
常见错误现象：button 元素在 Outlook 中塌陷成一行文字；<a> 加 padding 后点击热区变小；Gmail Web 版把 text-align: center 应用到整个单元格而非文字本身。
- 始终用
<table>包裹按钮内容，不用<div>或语义化标签 - 按钮文本必须放在
<td>里，不能只靠<a>的内联样式撑开宽度 - 避免在
<td>上写font-size: 0（某些旧版 Outlook 会丢字）
<td> 按钮单元格的关键属性怎么设
核心是让 <td> 自身具备可点击区域、固定尺寸和垂直居中，而不是依赖内部 <a> 的样式。
典型写法示例：
立即学习“前端免费学习笔记（深入）”；
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#007bff" style="border-radius: 4px;">
<a href="https://example.com" target="_blank" style="display: block; padding: 12px 24px; color: #ffffff; text-decoration: none; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;">
立即查看
</a>
</td>
</tr>
</table>
-
align="center"控制按钮水平居中（比 CSStext-align更可靠） -
bgcolor必须写在<td>上，Outlook 不识别background-colorCSS -
border-radius只在 Apple Mail、Gmail Web、Outlook for Mac 生效，Windows Outlook 会忽略——但不会报错或破坏布局 -
display: block在<a>上是必须的，否则 padding 不生效
多客户端下颜色与字体兼容性怎么兜底
颜色方面，#007bff 这类十六进制值全平台支持，但 rgb()、hsl()、命名色（如 blue）在 Outlook 和旧版 Gmail 中可能被忽略或转为黑色。
字体方面，font-family 必须按“首选 → 备选 → 通用族”顺序写，且不能含空格或引号（"Helvetica Neue" 会被截断）。
- 推荐写法：
font-family: Helvetica, Arial, sans-serif - 避免使用系统字体栈外的 Web Font（如 Google Fonts），多数邮件客户端不加载
- 字号统一用
px（em/rem在 Outlook 中失效） - 行高尽量靠
padding控制，不要依赖line-height（Gmail App 会重置）
响应式按钮在移动端怎么安全适配
纯 HTML 邮件不支持媒体查询里的 max-width 或 flex，但可以用 width="100%" + min-width 内联样式组合实现“窄屏收缩、宽屏定宽”。
关键点：所有宽度控制必须同时作用于 <table> 和包裹它的 <td>，否则 iOS Mail 会出现横向滚动条。
-
<table width="100%" style="min-width: 200px;">—— 让表格随容器缩放，但不低于 200px - 外层再套一层
<td align="center">并加width="100%"，防止 Android Gmail 把按钮撑满整行 - 不要用
vw或百分比padding（Outlook 会当 0 处理） - 测试时重点看 iPhone 上是否出现左右滑动，那是宽度失控的明确信号
真正麻烦的不是怎么写，而是哪些地方不能写——比如 :hover 在任何邮件客户端都不生效，伪类、CSS 变量、!important 在 Outlook 中基本等于注释。留出调试时间，比追求“一次写对”更实际。
