如何解决HTML邮件中Outlook Mac与网页版的视频fallback显示异常？

问题核心 #

• 新版Outlook macOS（12.6.1）会同时渲染<video>标签内部的备用图和外部的备用链接，导致内容重复显示
• 网页版Outlook不支持<video>标签，必须依赖外部的备用链接才能显示内容
• 原有代码里的\0 CSS hack仅对旧版Outlook（基于IE引擎）生效，无法覆盖新版Mac端Outlook

适配方案 #

结合媒体查询（针对新版Outlook macOS）和MSO条件注释（针对网页版Outlook）可以实现精准控制，以下是修改后的完整代码：

CSS 部分 #

/* 针对旧版Outlook（IE内核）：隐藏视频，显示外部备用链接 */
.video\0 { display: none !important; }
.videoFallback\0 { display: block !important; }

/* 针对新版Outlook macOS（WebKit内核）：隐藏视频内部的备用图 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    _::-webkit-full-page-media, _:future, :root .video-inner-fallback {
        display: none !important;
    }
}

HTML 部分 #

<!-- Video -->
<tr>
    <td style="padding: 30px 30px 10px 30px;">
        <!-- 视频标签：支持的客户端播放视频，不支持的显示内部备用图 -->
        <video class="video" width="540" controls poster="https://fakeimg.pl/540x400" src="https://example.com/yourvideoname.mp4">
            <!-- 给内部备用图加专属类，方便新版Outlook macOS隐藏 -->
            <a class="video-inner-fallback" rel="noopener" target="_blank" href="https://www.example.com/">
                <img style="width: 540px;" src="https://fakeimg.pl/540x400" width="540" />
            </a>
        </video>

        <!-- 仅在网页版/旧版桌面Outlook显示的备用链接 -->
        <!--[if mso]>
        <a class="videoFallback" rel="noopener" target="_blank" href="https://www.example.com/">
            <img border="0" src="https://fakeimg.pl/540x400" width="540">
        </a>
        <![endif]-->
    </td>
</tr>
<!-- /Video -->

代码说明 #

• MSO条件注释：只有网页版和旧版桌面Outlook能识别这段代码，确保外部备用链接只在这些环境显示
• 媒体查询：通过特殊选择器精准定位WebKit内核的新版Outlook macOS，隐藏视频标签内部的备用图，避免重复显示
• 类名区分：给视频内部的备用图单独加类，和外部备用链接区分开，实现分别控制

调整后各客户端表现：

• 支持视频的客户端（如Apple Mail、Gmail）：仅显示视频播放器
• 新版Outlook macOS：仅显示视频播放器，无重复内容
• 网页版/旧版桌面Outlook：仅显示外部备用图链接
• 其他不支持视频的客户端：显示视频标签内部的备用图链接

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