Outlook邮件模板：无JS、CSS伪元素及HTML5特性实现点击显隐内容

需求回顾 #

• 实现点击触发内容显示/隐藏
• 禁用技术：JavaScript、:checked伪类（checkbox/radio）、带tabindex的:focus、:target、HTML5 <details> 元素
• 已尝试所有伪元素和HTML5方案均无效

Outlook渲染限制说明 #

Outlook桌面端（Windows）基于Word渲染引擎，对现代CSS交互特性支持极差，几乎所有纯CSS触发的交互逻辑都无法生效。只能依赖Outlook专属的VML（Vector Markup Language）控件实现有限的折叠功能，或者采用兼容所有客户端的无交互方案。

方案1：Outlook桌面端专属折叠面板 #

利用Outlook条件注释和Word的VML形状控件实现点击折叠/展开，仅支持Outlook Windows客户端：

<!--[if mso]>
<v:shape id="toggleBtn" coordsize="21600,21600" o:spt="179" adj="10000" path="m@0,l@1,21600@2,21600@3,xe" filled="f" stroked="f" style="width:100px;height:100px;cursor:pointer;">
  <v:formulas>
    <v:f eqn="val #0"/>
    <v:f eqn="sum width 0 @0"/>
    <v:f eqn="sum height 0 @0"/>
  </v:formulas>
  <v:path o:connecttype="custom" o:connectlocs="@0,0;@1,0;@1,@2;@0,@2" o:connectangles="270,180,90,0"/>
  <v:textbox style="v-text-anchor:middle;">
    <center><span style="background:blue;color:white;padding:20px;">点击展开</span></center>
  </v:textbox>
  <v:imagedata o:title="Click to expand"/>
</v:shape>
<v:shapetype id="_x0000_t179" coordsize="21600,21600" o:spt="179" adj="10000">
  <v:formulas>
    <v:f eqn="val #0"/>
    <v:f eqn="sum width 0 @0"/>
    <v:f eqn="sum height 0 @0"/>
  </v:formulas>
  <v:path o:connecttype="custom" o:connectlocs="@0,0;@1,0;@1,@2;@0,@2" o:connectangles="270,180,90,0"/>
</v:shapetype>
<div style="display:none;" id="toggleContent">
<![endif]-->

<!-- 非Outlook客户端 fallback -->
<div style="margin-bottom:10px;">
  <div style="width:100px;height:100px;background:blue;color:white;display:flex;align-items:center;justify-content:center;">点击查看内容</div>
</div>
<div style="height:200px;background:green;padding:10px;color:white;">
  这是展开的内容区域
</div>

<!--[if mso]>
</div>
<![endif]-->

说明：

• Outlook Windows客户端会识别VML控件，点击形状可切换内容的显示/隐藏
• 其他客户端（如Outlook Mac、网页邮箱、移动端）会直接显示全部内容，避免交互失效

方案2：全客户端兼容的无交互替代 #

如果需要所有客户端都有统一的体验，只能放弃点击交互，采用以下两种方式：

方式A：默认展开+视觉分区 #

<div style="width:100px;height:100px;background:blue;color:white;display:flex;align-items:center;justify-content:center;">以下为详细内容</div>
<hr style="border:none;border-top:2px solid #ccc;margin:10px 0;">
<div style="height:200px;background:green;padding:10px;color:white;">
  详细内容区域
</div>

方式B：默认隐藏+文字提示 #

<div style="width:100px;height:100px;background:blue;color:white;display:flex;align-items:center;justify-content:center;">点击此处查看完整内容（需手动滚动）</div>
<div style="height:200px;background:green;padding:10px;color:white;margin-top:10px;">
  完整内容区域
</div>

总结 #

Outlook的渲染机制决定了无法实现跨客户端的纯CSS/HTML点击交互，只能针对Outlook Windows客户端用VML控件做专属支持，或者采用无交互的兼容方案。

内容的提问来源于stack exchange，提问作者jane