邮件模板必须用三层<table>结构：外层100%宽、中层600px固定宽、内层内容块，超三层易致iOS Mail和Samsung Email错位；分栏改用并排<td>而非嵌套<table>，<td>禁用margin而用padding或空<td>留白，响应式靠三段式结构共存而非@media。
复杂邮件模板不是加更多功能就能“更专业”，而是每多一层嵌套、每多一个交互元素，就多一个在 Outlook 或 Gmail 里崩掉的点。真正能落地的方案，必须从结构源头掐断风险，而不是靠测试时补补丁。
为什么嵌套超过三层的 <table> 在 iOS Mail 和 Samsung Email 里会错位
不是渲染慢，是重绘逻辑被压垮：这两类客户端对 DOM 层级敏感，四层以上嵌套容易触发文字换行异常、valign 失效、甚至整列内容偏移。它们不报错，只是静默错乱。
- 外层容器（100% 宽）、中层固定宽（600px）、内层内容块 —— 这三层是实测安全上限
- 按钮、图标组、多列信息区，别再套
<table>，改用单层<td>+padding+align控制间距和对齐 - 如果必须分栏（比如两列产品卡片），用并排两个
<td>，而非嵌套两个<table>
CssToInlineStyles 和 juice 处理后仍出问题的三个硬伤
工具能转样式，但转不出语义错误。常见失效不是因为没内联，而是内联位置错了或属性冲突了。
-
<table>上写style="width: 600px"：Outlook 2013/2016 直接忽略，必须搭配 HTML 属性width="600" -
<td>上写margin：90% 客户端无效，包括 Gmail 和 Outlook；想留空隙，只能靠相邻<td>的padding或空<td> - 伪类（
:hover、:first-child）即使被转进style也无意义 —— 所有主流客户端都不解析
响应式在邮件里不是靠 @media，而是靠三段式结构切换
Gmail Web 和 iOS Mail 支持 @media only screen and (max-width: 600px)，但 Outlook Desktop（2016–2024）完全无视它。所谓“响应式”，其实是用三套结构共存，靠客户端能力自动择一渲染。
立即学习“前端免费学习笔记（深入）”；
- 桌面结构：并排
<td>，设固定宽，靠width="300"控制 - 移动端结构：用
class="stack-column"+@media把并排<td>变成display: block !important，但前提是这些<td>已包裹在同一个<tr>内 - Outlook 降级结构：用
mso-hide: all和class="hide-mobile"配合条件注释，让 Outlook 只看到最简表格骨架
越复杂的模板，越要克制“想让它看起来更好”的冲动。字体、圆角、阴影、动画——这些不是锦上添花，而是给兼容性埋雷。真正难的不是写出来，是在删掉 70% 的现代 CSS 后，还能让信息清晰、操作可达、品牌可辨。
