HTML结构在跨平台邮件客户端中的极限兼容方案-html教程-PHP中文网

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

html结构在跨平台邮件客户端中的极限兼容方案

为什么

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

Outlook桌面版（2007–2019）用Word引擎解析HTML，<div>、<code><section></section>、<header></header>这些语义化标签会被强制换行、忽略padding、丢掉盒模型——不是“渲染错”，而是压根不认。Gmail会剥离整个<style></style>块，Apple Mail对flex支持飘忽不定。最终所有客户端都稳稳吃下<table>、<code><tr>、<code><td>这三件套。 <ul><li><code><table>必须带<code>width属性（如width="600"），仅靠style="width: 600px;"在Outlook 2013里会失效

所有布局层级必须严格是

<table> → <tr> → <td>，嵌套再深也别用<code><div>包一层
<li>加<code>role="presentation"

不解决渲染问题，但能让屏幕阅读器跳过布局表，属于无障碍刚需

cellspacing="0"和cellpadding="0"要写全，否则Outlook默认插入空白像素

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

不是所有写进style=""里的声明都会起作用。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>上可靠，<code><p></p>或<div>里写等于白写；<code>background-color可用，background-image全平台失效
禁用：display: flex、display: grid、@media、!important（Gmail会重写你的优先级）
图片相关：@@##@@必须带width、height、alt，且style="display: block;"防止下方空白

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

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

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

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

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