邮件客户端兼容性差导致乱码错位，因Outlook等禁用Flex/Grid、@media及外部CSS，仅支持表格布局与内联style；图片需绝对URL；字体用安全栈；Outlook须用VML绕过限制；测试必须覆盖多端真实环境。
为什么直接用现代 HTML 写的页面发邮件会乱码、错位、样式失效
因为绝大多数邮件客户端（Outlook、Apple Mail、Gmail Web/App）不支持 CSS Flex/Grid、@media 查询、外部样式表，甚至内联 <style> 也会被过滤或忽略。它们只认老式、冗余、属性写死的 HTML 表格布局和内联 style 属性。
常见错误现象：display: flex 完全不生效；margin/padding 在 Outlook 中被重置；图片不显示（路径是本地 file:// 或相对路径）；字体变成默认宋体；按钮点击区域消失。
- 所有样式必须写成内联
style="..."，不能依赖<style>块或外部 CSS - 布局优先用
<table>嵌套，不用<div>；列宽用width属性而非 CSS - 图片地址必须是绝对 URL（
https://开头），且建议加alt和固定width/height - 避免使用
float、position、z-index—— Outlook 会直接丢弃整条声明
如何把现有 HTML 页面快速转成兼容邮件客户端的模板
不能“转换”，只能“重写”：把语义化结构打散，按邮件规则重建。工具如 htmlemail.io 或 Mailchimp 的编辑器能辅助，但生成结果仍需人工校验。
关键动作不是改代码，而是改思维：从“浏览器渲染逻辑”切换到“邮件客户端容忍逻辑”。比如一个响应式卡片，在网页里用 max-width + flex-wrap，在邮件里得拆成两层 <table>，外层定宽 600px，内层用 <tr><td width="50%"> 手动分栏。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 删掉所有
<head>、<body>外壳，只保留<table>及其子元素 - 把 CSS 类名全部展开为内联
style，例如class="btn"→style="background:#007bff;color:#fff;padding:12px 24px;text-decoration:none;display:inline-block;" - 字体统一用安全栈：
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;，别写'PingFang SC'这种系统字体 - 行高、间距靠
<td>的height和padding控制，不要信line-height在所有客户端都一致
Outlook 对 HTML 和 CSS 的特殊限制怎么绕过
Outlook（尤其是 Windows 桌面版）用的是 MS Word 渲染引擎，对 HTML 支持极差。它会把 div 自动闭合、吃掉 border-radius、把 background-image 当透明处理。
最稳妥的写法是：用 <v:rect> 和 <v:roundrect>（VML 标签）给 Outlook 单独画圆角按钮或背景，同时用条件注释包裹，其他客户端直接忽略。
- 检测 Outlook 的条件注释必须写成：
<!--[if mso]>...<![endif]-->，注意中括号和空格不能错 - 圆角按钮：外面套一层 VML
<v:roundrect>，里面再放一个<div>或<table>保证其他客户端可读 - 避免用
background-color直接设在<td>上 —— Outlook 有时会漏渲染，改用<table bgcolor="#f0f0f0"> - 不要指望
text-align: center居中整个区块，Outlook 更认<center>标签（虽已废弃，但它认）
测试邮件模板是否真能跨客户端正常显示
本地预览毫无意义。必须在真实客户端里看：Gmail（Web + iOS/Android）、Outlook（Windows/macOS/iOS）、Apple Mail（macOS/iOS）、Yahoo Mail。
免费方案有限：Mailchimp 的预览功能只覆盖主流，Litmus 或 Email on Acid 是专业选择，但贵。折中做法是建多个测试邮箱（Gmail、Outlook.com、iCloud），手动发样稿。
- 特别注意 Gmail：它会把
style标签里的选择器压缩合并，导致.btn:hover完全无效 —— 邮件里根本别写伪类 - iOS Mail 对
font-size小于 14px 的文字自动放大，所以正文最小字号设为14px - 所有链接必须带
http://或https://，//example.com协议相对路径在 Outlook 里会变成outlook://错误跳转 - 发测试邮件前，用
premailer（Python 库）或在线工具如putsmail.com把 CSS 内联 —— 别手敲，容易漏
真正麻烦的不是写法，是每个客户端对同一段 HTML 的解析差异像黑盒。多发几次测试邮件，比读十篇指南更管用。
