<table>是唯一能撑住全场的HTML标签，因其在Outlook、Gmail、Apple Mail等所有主流邮件客户端中均被稳定支持，而div等语义化标签或现代CSS布局方案普遍失效。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

为什么

是唯一能撑住全场的HTML标签

Outlook桌面版（2007–2019）用Word引擎解析HTML，<div>、<section>、<header>这些语义化标签会被强制换行、忽略padding、丢掉盒模型——不是“渲染错”，而是压根不认。Gmail会剥离整个<style>块，Apple Mail对flex支持飘忽不定。最终所有客户端都稳稳吃下<table>、<tr>、<td>这三件套。

• <table>必须带width属性（如width="600"），仅靠style="width: 600px;"在Outlook 2013里会失效
• 所有布局层级必须严格是<table> → <tr> → <td>，嵌套再深也别用<div>包一层
• 加role="presentation"不解决渲染问题，但能让屏幕阅读器跳过布局表，属于无障碍刚需
• cellspacing="0"和cellpadding="0"要写全，否则Outlook默认插入空白像素

内联style里哪些CSS属性真能生效

不是所有写进里的声明都会起作用。Gmail会过滤含display: none的整段元素；Outlook忽略margin、float、position；background-image在Outlook中完全空白。真正跨平台可用的只有基础盒模型与文本属性。

• 必写： color、font-family（需多层回退，如'Open Sans', Helvetica, Arial, sans-serif'）、font-size、line-height（用无单位值如1.4，别用rem）
• 慎用：padding只在<td>上可靠，<p>或<div>里写等于白写；background-color可用，background-image全平台失效
• 禁用：display: flex、display: grid、@media、!important（Gmail会重写你的优先级）
• 图片相关：<img>必须带width、height、alt，且style="display: block;"防止下方空白

响应式怎么在没@media的情况下做

纯@media在Gmail和Outlook里基本被无视，所谓“响应式邮件”其实是用<table>嵌套+条件性style模拟出来的视觉适配。核心思路是：PC端用固定宽度表格，移动端靠max-width + width="100%"收缩，再用style控制隐藏/显示。

• 外层容器：<table width="100%" style="max-width: 600px;">——width="100%"让手机撑满，max-width防PC端溢出
• 两栏布局：不用float或inline-block，改用两个并列<td width="300">，移动端通过style="width: 100% !important;"强制单列（注意!important仅在此处可控，别滥用）
• 隐藏元素：别用display: none，改用<td style="font-size: 0; line-height: 0; height: 0; overflow: hidden;">配合<span>包裹内容，Gmail不会删它
• 字体缩放：移动端不要依赖vw或rem，统一用px或无单位line-height，避免iOS Mail解析异常

链接和图片在各客户端的真实行为

链接打不开、图片不显示，往往不是代码写错，而是客户端主动拦截或协议修正导致的。比如iOS Mail会把http://链接静默转成https://后404；Gmail对target="_blank"直接忽略；Outlook桌面版连<base href>都不认。

立即学习“前端免费学习笔记（深入）”；

• <a>必须用href绝对路径，HTTPS优先；target="_new"比target="_blank"在Outlook和Gmail App中更稳（虽非标准，但实测有效）
• <img>的src必须是HTTPS绝对路径，相对路径或HTTP链接在iOS Mail里大概率404
• 禁用<base href="">：所有主流客户端都不支持，反而干扰链接解析
• alt属性不是可选——Gmail没alt就显示红叉，Outlook可能直接留白

真正难的不是让邮件在某个客户端跑起来，而是同一份HTML在Outlook 2016桌面版、Gmail Web、Gmail App、Apple Mail、OWA这五种环境里，文字对齐不偏移、图片不塌陷、两栏不变单列。每个<td>的width、每个style的取舍、每张图的alt长度，都得在五种渲染引擎之间找交集——没有银弹，只有反复测试后的妥协点。