Outlook VML，模拟CSS重复/定位
对于我们的电子邮件模板，我们目前正在使用下面的代码在一些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]-->回答 1
Stack Overflow用户
发布于 2012-12-24 16:47:48
据我所知，VML background标记很难使用。它们看起来不是很灵活，我不确定你会有多幸运，试图像处理CSS元素一样操纵它们。
也就是说，shape和image标签似乎更具协作性(相对于它们的对等物)。我找到的关于这个主题的最有趣的文章是这篇：http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/
这篇文章所说的是，Outlook在遇到CSS属性时倾向于丢弃它们(正如您无疑已经发现的那样)。然后，它为应用(基于图像的)背景提供了两个替代选项：
- 通过
<body>标签上的CSS设置背景图像。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属性应用于形状元素(如上面的示例所示)。这应该会解决你的背景重复问题。
至于居中，该规范规定了以下内容：
中心-x，中心-y
这些属性可用于指定元素在其父容器框内的块级框的中心。
这将为您解决水平居中的问题。为了获取信息。
形状和组元素包含用于其内容的块-它们定义了一个CSS2“块级框”。
...so某些布局问题应该可以通过应用包含shape或group元素来解决。
https://stackoverflow.com/questions/13644022
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号