不能用现代HTML结构模拟邮箱客户端，因为Outlook用MS Word引擎、Gmail剥离<style>标签、Apple Mail忽略position/float，模拟界面无法复现这些限制；必须用XHTML 1.0 Strict DOCTYPE，嵌套table布局，内联样式需规避客户端过滤，图片按钮须严格按邮件规范封装，并依赖真机多端测试验证。
为什么不能用现代 HTML 结构模拟邮箱客户端
直接拿 <div> + flex + @media 写个“模拟邮箱界面”看似能跑通浏览器，但和真实邮件客户端渲染逻辑完全脱节。Outlook 桌面版用 MS Word 引擎解析 HTML，Gmail Web 会剥离整个 <style> 标签，Apple Mail 对 position 和 float 视而不见——你模拟的“客户端”，根本没复现这些限制。
怎么搭一个真正贴近真实环境的模拟结构
不是写 UI 界面，而是搭一套最小可验证的邮件 DOM 骨架，让后续样式、图片、按钮测试有依托：
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">必须用这个 DOCTYPE，Gmail 和 Outlook 实际发信时会 fallback 到它 - 外层
<table width="100%">套中层<table width="600">，别用style="width: 600px"—— Outlook 2013/2016 直接忽略 - 所有文字、按钮、图片必须塞进
<td>，且优先用align="center"而非style="text-align:center"（Outlook 2010 不认后者） - 删掉所有
<head>里除<meta charset="utf-8">和<meta name="viewport">外的内容，<title>可留但无实际作用
内联样式怎么写才不被 Gmail 或 Outlook 吃掉
不是“加了 style 就算内联”，而是要避开客户端主动过滤的写法：
-
margin和padding在 Outlook 中常被重置，改用<td cellpadding="20">或嵌套空<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 中可能失效
图片和按钮为什么总在模拟里不显示或错位
不是路径或尺寸问题，是寄生关系没对：
立即学习“前端免费学习笔记（深入）”；
-
<img>必须同时带width、height属性和对应style，例如：<img src="https://example.com/logo.png" width="120" height="40" style="width:120px;height:40px;display:block;"> - 按钮不能用
<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>加border测试用，正式发前必须设为border="0"，否则 Outlook 渲染出黑边
最易被忽略的是：没有真实客户端测试环境就认为“看起来没问题”，但 Outlook 的 Word 渲染器连 <p> 都会自动闭合补标签，这种错位不会报错，只会静默错乱。
