Question

对于我们的电子邮件模板，我们目前正在使用以下代码在某些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]-->

Answer 1

从我可以挖掘的内容来看，VML background标签难以使用。它们看起来不是很灵活，我不确定你会像尝试CSS元素一样试图操纵它们。

尽管如此，shape和image标签似乎更合作（相对于他们的VML对应物）。我在这个主题上发现的最有趣的文章是这个：http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/

文章所说的是Outlook在遇到CSS属性时会倾向于丢弃它们（因为你毫无疑问地发现了）。然后，它提供了两种应用（基于图像）背景的替代选项：

通过CSS在HTML的<body>标记上设置背景图片。 Outlook显然接受了这一点。
使用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]-->

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

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

在这种情况下，与上面的示例一样，使用style标记将CSS属性应用于形状元素应该没有问题（如上例所示）。这应该照顾你的背景重复问题。

至于居中，规范说明如下：

center-x，center-y

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

这应该照顾你的横向居中问题。有关信息......

形状和组元素包含其内容的块 - 它们定义了一个CSS2“块级别框”。

...因此，应该通过应用包含shape或group元素来解决某些布局问题。

Outlook VML，模拟CSS重复/定位

1 个答案: