如何实现Outlook兼容HTML邮件的垂直滚动条效果

问题核心原因 #

Windows 平台2007及之后版本的Outlook使用Word作为邮件渲染引擎，完全不支持overflow相关CSS属性，你当前用div+overflow:auto实现滚动容器的写法，会被Outlook直接忽略溢出控制逻辑，容器自动撑开为内容总高度，不会出现滚动条。
所有邮件客户端默认拦截JS、iframe，不存在用这类技术实现滚动的可能性，没有能让Outlook原生生成滚动条的纯CSS写法，只能做适配降级。

可落地的兼容方案 #

按兼容性优先级从高到低排序：

• 方案1：分客户端渐进适配（推荐）
  用Outlook专属的条件注释做逻辑拆分：对Gmail、Apple Mail等支持overflow属性的客户端，保留原有滚动效果；对Outlook客户端做固定高度截断，底部增加跳转入口引导用户查看完整内容。
  参考实现代码：

</table>
</td>

点击查看完整表格内容 ``` - 方案2：全量展示内容（零兼容成本） 如果表格总数据行数不多，直接去掉滚动容器限制，让表格完整展示在邮件正文中，所有邮件客户端都能正常渲染，不会出现样式错乱，唯一的影响是邮件整体长度会增加。 - 方案3：固定高度纯截断 如果不需要引导用户看全量内容，直接给Outlook端的容器加固定高度+`overflow:hidden`，超出高度的内容直接隐藏即可，不需要额外加跳转入口。

适配注意事项 #

• 不要尝试在HTML邮件中实现复杂交互：包括滚动、折叠展开、弹窗这类效果，Outlook、企业微信邮箱、部分国产邮箱客户端对交互CSS支持度极差，很容易出现样式错乱
• 邮件布局尽量全用table嵌套实现，Outlook对div的盒模型解析存在大量已知bug，用div做布局很容易出现错位、宽度溢出问题
• 不要追求所有邮件客户端的展示效果完全一致，HTML邮件适配的核心目标是：所有客户端都能正常阅读内容，支持特性的客户端获得更好的视觉体验

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