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