条件注释(如 <!--[if mso]><[endif]--> 在 Outlook PRE 中不起作用。有没有其他方法?

Conditional comments like <!--[if mso]><[endif]--> are not functioning in Outlook PRE. Is there an alternative approach?

提问人:CatAgain 提问时间:10/6/2023 最后编辑:SyferCatAgain 更新时间:11/10/2023 访问量:54

问:

我正在尝试使用 HTML 创建带有表单的电子邮件。如您所知,Outlook 由于其不同的呈现引擎,通常需要特殊处理。 (事实上,我还没有弄清楚如何在旧版本的 Outlook 中创建可填写的表单。

虽然旧版本的 Outlook 似乎不起作用,但我注意到带有输入字段的简单表单似乎在 Outlook PRE 中起作用。 像这样的东西:

<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>

它在 Outlook 中显示为只读窗体,不会在 Outlook PRE 中显示。

它在 Outlook 中的外观

what it looks like in Outlook

我还发现是 iframe 部分导致表单无法在 Outlook PRE 中显示。

因此,我需要根据用户是否使用 Outlook PRE 来确定是否保留 iframe 部分。 (实际上,iframe 的存在似乎并没有什么不同。但是,可能仍存在其他问题,因此请务必根据用户是否使用 Outlook PRE 来确定是否显示它。

但是,我遇到了一个问题:常用的条件代码在 Outlook PRE 中不起作用,我不确定如何确定用户是否正在使用 Outlook PRE。

我也尝试过 <!--[if gte mso 9]> 和 <!--[if mso |IE]>,但它们没有任何效果。我不确定如何识别特定应用程序的“mso”、“IE”等标签和类似标签。

您能否帮助我弄清楚如何检测用户是否正在使用 Outlook PRE 或建议处理 Outlook 呈现问题的替代方法?

以下是我的实验结果的一些截图。

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

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

Outlook PRE的结果

result on Outlook PRE

Outlook HTML 电子邮件 模板

评论

0赞 Nathan 10/9/2023
Outlook PRE 到底是什么意思?那是 Office 365 吗?2019?Windows Mail?Windows/Mac?
0赞 CatAgain 10/12/2023
Windows 推出了名为 Outlook PRE 的新 Outlook。insider.microsoft365.com/ja-jp/blog/......
0赞 Nathan 10/17/2023
似乎是预览的“Pre” - 这是新的Outlook One,基于 Outlook.com

答:

0赞 Nathan 10/9/2023 #1

“PRE”似乎代表预览。因此,实际名称似乎是“Outlook one”。

新的展望似乎是基于 Outlook.com。因此,请检查caniemail以了解该 https://www.caniemail.com/clients/outlook/#outlook-com 上的工作,并 https://www.howtotarget.email/ 并运行Outlook搜索。

例如,这应该针对 Outlook.com 和新 Outlook(在新 Outlook 中未经测试):

[class~="x_your-class-name"] {
  /* Replace this comment with your styles */
}

这个被标记为“Outlook PWA”,所以不确定这如何公平:

@media (display-mode: standalone) {
  [class~=""x_your-class-name""] {
    /* Replace this comment with your styles */
  }
}

但是,如果您尝试并坚持使用所支持的内容,则通常不需要这些。caniemail 列表应该对发现替代可能性有很大帮助。