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