Outlook等邮件客户端因使用Word渲染引擎，直接丢弃第4层及更深的嵌套结构，导致内容不进入DOM树；所有稳定邮件模板方案均禁用深层div布局，改用table实现栅格兼容。
为什么超过3层嵌套在邮件中大概率不显示不是样式没生效，是 Outlook 等客户端直接丢弃第4层及更深的 <div>。它用 Word 渲染引擎，遇到 <code><div><div><div><div> 这种结构时，最内层内容根本不会被解析进 DOM 树——你 inspect 元素也看不到，控制台查不到，连空节点都没有。<ul><li>Outlook 2016/365：第4层 <code><div> 开始截断，子元素全失<li>Gmail Web 虽稍宽松，但混用 <code><table> 和 <code><div> 会触发整块样式重置<li>Apple Mail 对 <code>display: flex 或 float 的 <div> 层直接忽略，不管嵌套多浅<p>这不是“兼容性差”，而是渲染器根本不处理——所以别测“能不能跑”，先看“会不会进 DOM”。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
<p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<h3>用</h3>
<table>替代布局型<div>不是妥协，是唯一可靠路径<p>所有稳定邮件模板方案（MJML、Cerberus、Foundation for Emails）默认禁用深层 <code><div> 布局，转而用 <code><table> 单元格嵌套。因为 <code><table><tr><td><table>… 这种结构被所有客户端完整支持，包括 Outlook。<ul><li><code><table> 的嵌套是语义+实现双保障：HTML 规范允许无限层 <code><table> 嵌套，且各客户端渲染器都做了专门适配<li>用 <code><div> 做栅格布局（如 <code>col-6 包裹）在邮件里等于裸奔；换成 <td width="50%"> 就稳了<li>MJML 编译后自动转 <code><table>，但如果你手写 HTML + juice 内联，必须自己确保没用 <code><div class="row"> 这类前端惯用结构<h3>juice 内联时三个必设参数，漏一个就白干</h3>
<p>很多人跑 <code>juice(html, { applyStyleTags: true }) 后发现样式还在 <style></style> 里，发出去就是白屏——因为 juice 默认不删原始 style 标签，也不处理 URL 路径，更不碰媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 必须加
removeStyleTags: true，否则 <style></style> 块残留，Gmail 直接剥离
- 必须显式传
webResources: { relativeTo: 'path/to/html' }，否则 background-image: url(./img.png) 内联后变成 404
- 若 CSS 含
@media，得配合 preserveMediaQueries: false（邮件不支持媒体查询，留着反而干扰内联逻辑）
示例正确调用：juice(html, { applyStyleTags: true, removeStyleTags: true, webResources: { relativeTo: './' }, preserveMediaQueries: false })
组件化开发时，嵌套深度失控往往始于“一次临时包装”
Vue/React 里写个 <Card><Header><Title> 看似合理，但编译后可能生成 5 层 <div>。问题不在框架，而在没约束输出层级。<ul>
<li>每个组件模板开头加检查：<code><!-- depth: 2 --> 注释，CI 阶段用脚本扫描并报错超限
禁止用 <div><slot></slot></div> 包裹子内容——改用 display: contents 或 Fragment
SSR 场景下，服务端模板（如 Twig、Thymeleaf）递归渲染菜单时，$depth 必须作为参数透传，且守卫条件 if ($depth > 3) return '' 要写死
真正难的不是写深，是意识到：第4层 <div> 在邮件里不存在，在低端安卓机上 layout 耗时翻倍，在屏幕阅读器里直接跳过——它不是“还没优化”，是“已失效”。</div>
不是样式没生效，是 Outlook 等客户端直接丢弃第4层及更深的 <div>。它用 Word 渲染引擎，遇到 <code><div><div><div><div> 这种结构时，最内层内容根本不会被解析进 DOM 树——你 inspect 元素也看不到，控制台查不到，连空节点都没有。<ul><li>Outlook 2016/365：第4层 <code><div> 开始截断，子元素全失<li>Gmail Web 虽稍宽松，但混用 <code><table> 和 <code><div> 会触发整块样式重置<li>Apple Mail 对 <code>display: flex 或 float 的 <div> 层直接忽略，不管嵌套多浅<p>这不是“兼容性差”，而是渲染器根本不处理——所以别测“能不能跑”，先看“会不会进 DOM”。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
<p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<h3>用</h3>
<table>替代布局型<div>不是妥协，是唯一可靠路径<p>所有稳定邮件模板方案（MJML、Cerberus、Foundation for Emails）默认禁用深层 <code><div> 布局，转而用 <code><table> 单元格嵌套。因为 <code><table><tr><td><table>… 这种结构被所有客户端完整支持，包括 Outlook。<ul><li><code><table> 的嵌套是语义+实现双保障：HTML 规范允许无限层 <code><table> 嵌套，且各客户端渲染器都做了专门适配<li>用 <code><div> 做栅格布局（如 <code>col-6 包裹）在邮件里等于裸奔；换成 <td width="50%"> 就稳了<li>MJML 编译后自动转 <code><table>，但如果你手写 HTML + juice 内联，必须自己确保没用 <code><div class="row"> 这类前端惯用结构<h3>juice 内联时三个必设参数，漏一个就白干</h3>
<p>很多人跑 <code>juice(html, { applyStyleTags: true }) 后发现样式还在 <style></style> 里，发出去就是白屏——因为 juice 默认不删原始 style 标签，也不处理 URL 路径，更不碰媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 必须加
removeStyleTags: true，否则<style></style>块残留，Gmail 直接剥离 - 必须显式传
webResources: { relativeTo: 'path/to/html' }，否则background-image: url(./img.png)内联后变成 404 - 若 CSS 含
@media，得配合preserveMediaQueries: false（邮件不支持媒体查询，留着反而干扰内联逻辑）
示例正确调用：juice(html, { applyStyleTags: true, removeStyleTags: true, webResources: { relativeTo: './' }, preserveMediaQueries: false })
组件化开发时，嵌套深度失控往往始于“一次临时包装”
Vue/React 里写个 <Card><Header><Title> 看似合理，但编译后可能生成 5 层 <div>。问题不在框架，而在没约束输出层级。<ul>
<li>每个组件模板开头加检查：<code><!-- depth: 2 --> 注释，CI 阶段用脚本扫描并报错超限
<div><slot></slot></div> 包裹子内容——改用 display: contents 或 Fragment$depth 必须作为参数透传，且守卫条件 if ($depth > 3) return '' 要写死真正难的不是写深，是意识到：第4层 <div> 在邮件里不存在，在低端安卓机上 layout 耗时翻倍，在屏幕阅读器里直接跳过——它不是“还没优化”，是“已失效”。</div>
