Outlook VML,模拟CSS重复/定位

And*_*eas 5 html email vml

对于我们的电子邮件模板,我们目前正在使用下面的代码在某些Outlook版本中启用背景,但是,我一直在试图围绕VML来看看是否可以在某种程度上模拟CSS属性,但是信息很少我发现VML似乎不完整或难以融入上下文.

在实践中,基本上只有两个主要感兴趣的属性,水平居中和仅重复x.我会假设这些是如此基本的VML应该很容易支持它,但我似乎无法弄清楚它...

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="..." color="#000000"/>
</v:background>
<![endif]-->
Run Code Online (Sandbox Code Playgroud)

Lev*_*lho 4

据我所知,VMLbackground标签很难使用。它们看起来不太灵活,我不确定您尝试像操作 CSS 元素一样操作它们会有多少运气。

也就是说,shape标签image似乎更具合作性(相对于其 VML 对应物)。我发现的关于该主题的最有趣的文章是这篇:https://web.archive.org/web/20140212122122/http ://iamskwerl.com/tech/2011/11/html-emails-outlook-and-背景图像/

文章所说的是,Outlook 在遇到 CSS 属性时往往会丢弃这些属性(您无疑已经发现了)。然后,它提供了两种应用(基于图像)背景的替代选项:

  1. <body>通过 CSS 在HTML 标签上设置背景图像。Outlook 显然接受了这一点。
  2. 使用VML。

现在,本文讨论将背景应用于表格单元格,但是它使用的技术对于在其他上下文中应用背景应该同样有效。(最坏的情况是,如果表格能让您获得所需的视觉布局,您甚至可能需要考虑使用表格)。

无论如何,文章作者使用的 VML 是这样的:

<!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); (+ more CSS)' src="background url" />
    <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); (+ more CSS)'>
    <div>
<![endif]-->
<!-- An HTML table -->
<!--[if gte mso 9]>
    </div>
    </v:shape>
<![endif]-->
Run Code Online (Sandbox Code Playgroud)

因此,乍一看,如果您决定使用图像,您应该能够直接在图像标签本身上定义 CSS 属性。您的另一个选择是使用shape可能更适合您的背景,因为您似乎想要使用计算的背景。在这种情况下,根据此处找到的规范http://www.w3.org/TR/NOTE-VML#

VML 形状和组元素完全参与 CSS2 视觉渲染模型。

在这种情况下,就像上面的示例一样,使用标签将 CSS 属性应用到形状元素应该没有问题style(如上面的示例所示)。这应该可以解决您的后台重复问题。

至于居中,规范中有以下规定:

x 中心、y 中心

这些属性可用于指定元素的块级框在其父容器框中的中心。

这应该可以解决您的水平居中问题。欲了解信息...

shape 和 group 元素包含其内容块 - 它们定义了 CSS2“块级框”。

...所以某些布局问题应该可以通过应用包含shapegroup元素来解决。