不能用现代html结构模拟邮箱客户端，因为outlook用ms word引擎、gmail剥离标签、apple mail忽略position/float，模拟界面无法复现这些限制；必须用xhtml 1.0 strict doctype，嵌套table布局，内联样式需规避客户端过滤，图片按钮须严格按邮件规范封装，并依赖真机多端测试验证。
为什么不能用现代 HTML 结构模拟邮箱客户端
直接拿 <div> + <code>flex + @media 写个“模拟邮箱界面”看似能跑通浏览器，但和真实邮件客户端渲染逻辑完全脱节。Outlook 桌面版用 MS Word 引擎解析 HTML，Gmail Web 会剥离整个 <style></style> 标签，Apple Mail 对 position 和 float 视而不见——你模拟的“客户端”，根本没复现这些限制。
怎么搭一个真正贴近真实环境的模拟结构
不是写 UI 界面，而是搭一套最小可验证的邮件 DOM 骨架，让后续样式、图片、按钮测试有依托：
必须用这个 DOCTYPE，Gmail 和 Outlook 实际发信时会 fallback 到它- 外层
<table width="100%"> 套中层 <code><table width="600">，别用 <code>style="width: 600px"—— Outlook 2013/2016 直接忽略 - 所有文字、按钮、图片必须塞进
<td>，且优先用 <code>align="center"而非style="text-align:center"（Outlook 2010 不认后者） - 删掉所有
里除<meta charset="utf-8">和<meta name="viewport">外的内容，<title></title>可留但无实际作用 -
margin和padding在 Outlook 中常被重置，改用<td cellpadding="20"> 或嵌套空 <code><td height="20"></td> - 背景色只写
bgcolor="#f5f5f5"，别依赖style="background:#f5f5f5"（Outlook 2016 不支持 background 属性） - 字体栈必须以 Web 安全字体结尾：
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"，别写PingFang SC或system-ui - 行高统一用无单位数值：
style="line-height: 1.4;"，line-height: 24px在 Apple Mail 中可能失效 -
@@##@@必须同时带width、height属性和对应style，例如：@@##@@ - 按钮不能用
<a></a>包文字，得用表格封装：<table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px"><a href="#" style="color:#fff;text-decoration:none;">立即领取</a></td></tr></table> - 所有图片 URL 必须是 HTTPS 绝对地址，
file://或相对路径在任何客户端都不加载 - 别给
<td> 加 <code>border测试用，正式发前必须设为border="0"，否则 Outlook 渲染出黑边最易被忽略的是：没有真实客户端测试环境就认为“看起来没问题”，但 Outlook 的 Word 渲染器连
<p></p>都会自动闭合补标签，这种错位不会报错，只会静默错乱。
内联样式怎么写才不被 Gmail 或 Outlook 吃掉
不是“加了 style 就算内联”，而是要避开客户端主动过滤的写法：
图片和按钮为什么总在模拟里不显示或错位
不是路径或尺寸问题，是寄生关系没对：
