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