【问题标题】:Outlook VML, emulate CSS repeat/positioningOutlook VML,模拟 CSS 重复/定位
【发布时间】:2012-11-18 14:28:40
【问题描述】:

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

【问题讨论】:

    标签: html email vml


    【解决方案1】:

    据我所知,VML background 标签很难使用。它们似乎不是很灵活,我不确定你能像操作 CSS 元素一样操作它们有多大的运气。

    也就是说,shapeimage 标记似乎更加合作(相对于它们的 VML 对应物)。我在该主题上找到的最有趣的文章是这篇文章:http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/

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

    1. 通过 CSS 在 HTML 的 &lt;body&gt; 标记上设置背景图像。 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,因为您似乎想要使用计算过的背景,所以它可能更适合您。在这种情况下,根据此处找到的规范http://www.w3.org/TR/NOTE-VML#:

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

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

    至于居中,规范规定如下:

    中心-x,中心-y

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

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

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

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

    【讨论】:

    • 非常感谢!我希望可以将其设置为“正确”的背景,但经过我自己的更多测试以及您的建议,这显然是不可能的。
    • 我在使用上述方法时遇到了表格中的文本不可见的问题。我使用了this question 中的方法,它使用了rect,它解决了我的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多