必须用table布局、内联样式和Web安全字体写邮件，因Gmail、Outlook等客户端不支持div、flexbox、style标签及现代CSS。
直接用现代 HTML/CSS 写一封能发、能看、不崩的邮件？不行。几乎所有主流邮件客户端（Gmail、Outlook 桌面版、Apple Mail、Yahoo）都不支持 <div>、<section>、@media 查询、flexbox，甚至会剥离 <style> 标签里的 CSS。你得回到表格时代。
为什么不能用 <div> 布局邮件
Outlook for Windows 使用 Microsoft Word 渲染引擎，它根本不会识别 <div> 的语义或样式；Gmail 会自动包裹 <p> 并插入额外换行，破坏行高控制；iOS Mail 对 display: inline-block 支持极差。结果就是：布局错位、文字重叠、按钮消失、图片堆成一列。
实操建议：
- 所有容器必须用
<table>+<tr>+<td>嵌套，哪怕只是居中一个标题 - 禁用
<header>、<main>、<article>等语义化标签——它们在邮件里等同于无 - 宽度控制统一用
width="600"属性（不是 CSS），避免百分比 + max-width 组合 - 每张图片必须带
width和height属性，且设style="display: block;"消除基线间隙
内联样式是唯一安全的写法
邮件客户端对 CSS 的支持极其保守：<style> 标签在 Gmail Web 和 Outlook.com 中会被完全删除；Outlook 桌面版只认部分内联样式；Apple Mail 虽支持部分媒体查询，但无法保证断点触发时机。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 所有样式必须写进
属性，例如：<td style="font-family: Arial, sans-serif; color: #333; line-height: 1.4;"> - 字体栈必须以 Web 安全字体结尾：
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif - 字号统一用
px（如font-size: 16px），禁用rem、em、vh - 颜色避免透明度（
rgba()）、渐变、阴影——它们在多数客户端渲染为黑块或空白
响应式适配只能靠条件注释 + 媒体查询降级
真正的“响应式邮件”不是靠一套代码适配所有设备，而是用「渐进增强」策略：先确保桌面端基础结构稳定，再用 Outlook 条件注释和有限媒体查询给移动端加一层适配。
实操建议：
- 在
<head>中加入 Outlook 专用条件注释：<!--[if mso]><style type="text/css"> ... </style><![endif]--> - 媒体查询仅用于 iOS/Android Mail 和 Gmail App，写法必须简洁：
@media screen and (max-width: 480px) { .mobile-full { width: 100% !important; } } - 所有响应式类名（如
mobile-full）必须在对应<td>上用class=""声明，并配合内联样式兜底 - 别依赖
min-width或orientation查询——Android Mail 不支持前者，Outlook iOS 忽略后者
图片与链接必须手动加固
外链图片加载失败、点击区域错位、文字被自动加蓝下划线……这些不是 bug，是邮件客户端的默认行为。你得主动拦截并覆盖。
实操建议：
-
<img>必须含alt属性（无障碍+加载失败时显示），且设border="0"防止旧版 Outlook 添加边框 - 所有链接需加
style="text-decoration: none; color: #007bff;"，否则 Gmail 会强制蓝字+下划线 - 按钮不要用
<a>+ CSS 模拟，而要用<table>包裹文字，再给<td>加背景色和 padding - 如果需要点击放大图，不要用 JS——改用双图方案：小图作为主展示，
alt文本提示“点击查看大图”，大图放在邮件底部隐藏区域并附说明
最易被忽略的一点：没有“测试就发送”这回事。同一封邮件，在 Outlook 桌面版可能正常，在 Gmail App 里按钮错位，在 Apple Mail 中图片全不显示——必须用 Email on Acid 或 Litmus 实测至少 12 个客户端版本，才能确认是否真正可用。
