提问人:CatAgain 提问时间:10/6/2023 最后编辑:SyferCatAgain 更新时间:11/10/2023 访问量:54
条件注释(如 <!--[if mso]><[endif]--> 在 Outlook PRE 中不起作用。有没有其他方法?
Conditional comments like <!--[if mso]><[endif]--> are not functioning in Outlook PRE. Is there an alternative approach?
问:
我正在尝试使用 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 中的外观
我还发现是 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的结果
答:
“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 列表应该对发现替代可能性有很大帮助。
评论