5

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

1 回答 1

4

据我所知，VMLbackground标签很难使用。它们似乎不是很灵活，我不确定你会有多少运气来尝试像处理 CSS 元素一样操作它们。

也就是说，shape标签image似乎更加合作（相对于它们的 VML 对应物）。我发现的关于该主题的最有趣的文章是这篇文章：http: //iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/

文章所说的是，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]-->

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

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

在这种情况下，就像上面的例子一样，使用style标签将 CSS 属性应用于形状元素应该没有问题（如上面的例子所示）。这应该可以解决您的背景重复问题。

至于居中，规范规定如下：

中心-x，中心-y

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

这应该为您解决水平居中问题。有关信息...

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

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

于 2012-12-24T08:47:47.677 回答