Windows 10 个带有 Outlook 条件 VML 的邮件应用程序

Question

这个有点晦涩，但我希望有人能提供解决方案。

我正在创建一个带有全宽 header 栏的电子邮件模板。经过大量的 hacking around，我已经能够在大多数电子邮件客户端中很好地工作，结合使用 background-image 样式和条件 VML（对于 Outlook 客户端）。

问题是 Windows10 Mail App 响应 Outlook 条件语句，但无法正确呈现 VML。这会导致带有消息 "This picture can't be displayed".

的丑陋破损图像图标

这是我的条件 VML 块...

<!--[if gte mso 9]>
    <v:rect stroke="f" fill="t" style="mso-width-percent: 980; height: 200; position: absolute; z-index:-1; mso-position-horizontal: left">
<v:fill type="tile" src="/Content/images/my_background.gif" color="#f4f4f4" />
    </v:rect>
<![endif]-->

所以我需要的是获取 Windows 10 Mail 以正确显示 VML，或者完全忽略该部分。该设计在没有 header 栏的情况下工作正常，但我只是不希望它显示损坏的图像图标。

Answer 1

部分解A

将您的条件修改为

<!--[if (gte mso 9)&(lte mso 15)]>

VML 块显示在 Outlook 2013 中，但不显示在 Windows 10 邮件应用程序中。但是，它也会不显示 Outlook 2016。他们都认为自己是mso=16。（最后 2 句话尚未验证。）

部分解B

https://litmus.com/community/discussions/4176-windows-10-mail-bulletproof-background-buttons-broken

Answer 2

我知道这是一个老问题，但它可能对那些仍在为网络和 windows outlook 和 windows 邮件苦苦挣扎的人有用。

我找到了一种方法来专门隐藏来自 windows outlook 和 windows 10 邮件应用程序的元素：

<span style="mso-element:field-begin;"></span>
 Content to hide from Outlook 
<span style="mso-element:field-end;"></span>

参考这个很棒的 blog。

您还可以将所有 Outlook 应用程序（移动、网络、桌面）定位为：

<!--[if mso]> 
    <div> Your content that you want visible </div>            
<![endif]-->

你也可以用其他条件和目标特定版本来反转它，类似于：

<!--[if !mso]> Everything not mso (outlook or windows mail) <![endif]-->
<!--[if gte mso 16]> All mso versions that are greater than 16 <![endif]-->

更多关于这个link。

至于在 desktop/windows 版本的 outlook（邮件应用程序和 outlook ms）中显示背景图像，您可以使用 VML 以及更多相关信息，您可以找到 here.

Windows 10 个带有 Outlook 条件 VML 的邮件应用程序

Windows 10 Mail App with Outlook Conditional VML

email

outlook

vml

windows-10