Outlook PRE中条件注释失效，求检测方法或渲染兼容方案

我正在尝试制作带表单的HTML邮件，Outlook的特殊渲染引擎一直是难题——旧版Outlook没法正常运行可填写表单，但我发现简单带输入框的表单能在Outlook PRE中工作。不过现在遇到两个问题：

• 我的表单在普通Outlook里是只读状态，在Outlook PRE里直接完全不显示，排查后发现是iframe导致的
• 常用的MSO条件注释（比如<!--[if mso]-->）在Outlook PRE里失效，没法区分Outlook PRE和其他客户端，没法针对性保留/移除iframe

问题表单示例代码 #

<font color="#0C3992">
    -------------------------------------------------------------------------------------------------------------
    <br>
    <iframe id="hidden_iframe" name="hidden_iframe" style="display: none;">
        <font color="black" face="Arial" size="4">
            <font color="#0C3992">
                <font color="black" face="Arial" size="4">
                    <font color="#0C3992">
                    </font>
                </font>
            </font>
        </font>
        <form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSdvL2aeI35dJngy-q_nJfWsqS7hH4lP2h9JOM3p6d20o35uxA/formResponse"
        method="post" target="hidden_iframe">
            <font color="black" face="Arial" size="4">
                <font color="#0C3992">
                    <font color="black" face="Arial" size="4">
                    </font>
                </font>
            </font>
            <table border="0">
                <tr>
                    <td align="right" width="190">
                        <font color="#0C3992">
                            <b>
                                Contact information
                            </b>
                        </font>
                    </td>
                    <td width="200">
                    </td>
                    <td width="210">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        <font color="#0C3992">
                            Position:
                        </font>
                    </td>
                    <td colspan="2">
                        <textarea name="entry.1151157380" required="required" style="resize:none;width:400px;height:30px;border:2; color:#0C3992; font-size:18px; border-color:#0C3992 ;background-color:transparent;">
                            '+job_title+'
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        <font color="#0C3992">
                            Industry:
                        </font>
                    </td>
                    <td colspan="2">
                        <textarea name="entry.959426507" required="required" style="resize:none;width:400px;height:30px;border:2; color:#0C3992; font-size:18px; border-color:#0C3992 ;background-color:transparent;">
                            '+industry+'
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        <font color="#0C3992">
                            Company:
                        </font>
                    </td>
                    <td colspan="2">
                        <textarea name="entry.479802054" required="required" style="resize:none;width:400px;height:30px;border:2; color:#0C3992; font-size:18px; border-color:#0C3992 ;background-color:transparent;">
                            '+company+'
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        <font color="#0C3992">
                            Country:
                        </font>
                    </td>
                    <td colspan="2">
                        <textarea name="entry.1179625167" required="required" style="resize:none;width:400px;height:30px;border:2; color:#0C3992; font-size:18px; border-color:#0C3992 ;background-color:transparent;">
                            '+country+'
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        <font color="#0C3992">
                            Email:
                        </font>
                    </td>
                    <td colspan="2">
                        <textarea name="entry.759741514" required="required" style="resize:none;width:400px;height:30px;border:2; color:#0C3992; font-size:18px; border-color:#0C3992 ;background-color:transparent;">
                            '+email+'
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input checked name="entry.1961118204" type="radio" value="同意">
                        Agree
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="entry.1961118204" type="radio" value="不同意">
                        Disagree
                    </td>
                    <td>
                        <input style="border:2; color:white; font-size:30px; border-color:#0C3992 ;background-color:#0C3992;"
                        type="submit" value="SUBMIT">
                    </td>
                </tr>
            </table>
        </form>
    </iframe>
</font>

条件注释测试结果 #

我用以下传统MSO条件注释测试，发现Outlook PRE完全不识别：

<!--[if mso | IE]>
    <p>This is Microsoft Outlook.</p>
<![endif]-->

<!--[if !mso]><!-->
    <p>This is NOT Microsoft Outlook</p>
<!--<![endif]-->

Outlook PRE中的显示结果：

解决方法 #

一、Outlook PRE检测方案 #

Outlook PRE基于Chromium内核，不支持传统MSO条件注释，可通过以下方式区分：

1. CSS媒体查询识别
   新版Outlook支持标准CSS媒体查询，可通过针对WebKit内核的查询来区分：

   @media (min-resolution: 1dpi) and (-webkit-min-device-pixel-ratio: 0) {
       .hide-in-outlook-pre { display: none !important; }
       .show-in-outlook-pre { display: block !important; }
   }
   

   给iframe添加hide-in-outlook-pre类，同时准备一份无iframe的表单并添加show-in-outlook-pre类，实现客户端针对性显示。

2. 发送端UA检测
   如果通过邮件平台发送，可利用平台提供的客户端UA识别能力，Outlook PRE的UA包含OutlookWebApp或OutlookDesktop（Chromium版）标识，据此动态生成带/不带iframe的邮件内容。

二、表单渲染替代方案 #

1. 移除iframe，直接提交
   把表单的target属性改为_blank，去掉隐藏iframe，Outlook PRE中表单可正常显示并提交（会打开新标签页），普通Outlook中虽只读但能正常显示内容：

   <form action="你的表单提交地址" method="post" target="_blank">
       <!-- 原有表单内容不变 -->
   </form>
   

2. 降级提示方案
   针对不支持可填写表单的客户端（如旧版Outlook），添加引导提示：

   <!--[if mso]>
       <p>请点击链接填写表单：<a href="你的网页表单地址">表单链接</a></p>
   <![endif]-->
   <!--[if !mso]><!-->
       <!-- 正常显示表单 -->
   <!--<![endif]-->
   

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