邮件html必须用table布局、内联样式和属性式宽高，因outlook用word引擎不解析div，gmail剥离class，apple mail无视id/class，现代css如flex、media、border-radius等均失效或引发塌陷。

邮件系统里没有“兼容性方案”，只有“能发出去不塌的写法”——table是唯一布局容器，style属性是唯一生效样式载体，width和height属性比CSS更优先，否则Outlook错位、Gmail空白、Apple Mail断行不是bug，是必然结果。

为什么不能用

+ CSS写邮件HTML

Outlook桌面版用Word引擎，根本不解析div；Gmail会整块剥离<style></style>标签和所有class；Apple Mail对id和class基本无视。你写的<div class="header">Hello</div>在三端中等于没写。

• display: flex、@media、background-image、border-radius这些在网页里习以为常的东西，在邮件里要么被忽略，要么导致整段塌陷
• <p></p>会被Outlook自动包裹换行、重置边距，造成文字间距失控
• margin在Gmail App里不渲染，padding在Outlook中表现极不稳定（尤其padding-top常被吃掉）

table嵌套必须严格三层：

→ →

不是“用table就行”，而是必须按固定层级嵌套，跳级或混入div会导致Outlook错位。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 外层容器用<table width="600" align="center">，别写<code>style="width: 600px"——Outlook更认width属性本身
• 横向分栏不用float或inline-block，改用<td width="300">并列 <li>需要响应式堆叠？再套一层<code><table width="100%">，移动端靠<code>width="100%"强制单列，别信@media
• 避免colspan和rowspan——Outlook 2013+支持极不稳定，宁可用空<td>占位 <h3>内联样式必须手写，不能靠工具自动转</h3> <p>工具如Roadie能帮你把CSS类展开，但无法修复Outlook对<code>padding的忽略、Gmail对line-height: 1.4（无单位）的误读，或Apple Mail对font-size: 14px和14em的混淆。
  • 写padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成padding: 12px 16px;
  • 字体必须显式声明单位：font-size: 14px;、line-height: 20px;，而不是line-height: 1.4em
  • 背景色优先设在<table bgcolor="#f0f0f0">上，<code><td style="background-color:#f0f0f0">在Outlook里渲染不可靠 <li>图片必须带<code>width和height属性，且src是HTTPS绝对路径，否则Outlook显示占位符、Gmail直接block

  隐藏内容必须用hybrid写法，display: none在Gmail App里无效

  Gmail（尤其是iOS/Android App）会主动剥离style属性中的display、visibility、opacity声明，只保留极简子集。你写的style="display: none;"发过去就没了。

  • 需要隐藏内容（比如“仅桌面显示”区块），必须用hybrid写法：<div style="display: none; max-height: 0; overflow: hidden;"> <li>字体多层回退必须真实有效：<code><font face="Arial, sans-serif" size="2"></font>双兜底，font-family在Outlook 2007–2019中经常失效
  • DOCTYPE必须用XHTML Strict：，HTML5的<code>doctype不被识别

  真正难的不是写对一行代码，而是放弃所有现代前端直觉——每加一个div、每写一个@media、每省一个width属性，都在增加某台Outlook里突然错位的概率。这不是技术选型问题，是渲染引擎的物理限制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！