在 Outlook 中的 HTML 电子邮件模板中，CSS 按钮在背景图像上不合适答案

【问题标题】：CSS button out of place over background image in HTML email template in Outlook在 Outlook 中的 HTML 电子邮件模板中，CSS 按钮在背景图像上不合适
【发布时间】：2016-05-11 05:03:50
【问题描述】：

我正在创建一个带有背景图像和图像顶部的文本/CTA 按钮的电子邮件模板。我使用bulletproof backgrounds 作为背景图像，使用beefree.io 编辑器输出的按钮作为CTA 按钮。除了 Outlook 2010 之外，两者在所有客户端中都可以很好地呈现。当背景只是一种颜色时，我可以让 CSS 按钮完美呈现，反之亦然，当按钮只是一个图像时。当我将两者放在一起时，它会呈现以下内容：

这就是它应该呈现的方式：

CSS 按钮显示出来了，只是在错误的位置。有人对我的代码哪里出错有任何建议吗？

https://codeshare.io/zr0Bj（背景图像的代码从第 192 行开始）

谢谢康纳

【问题讨论】：

这个问题太有帮助了！

标签： css outlook html-email email-templates

【解决方案1】：

很遗憾，您不能在防弹背景图片上使用防弹按钮。而不是这个，我会为此按钮使用 td 和标签按钮版本。（关于 Acid 的电子邮件有一篇很棒的文章 - https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button）

这两种“防弹”技术表现不佳的原因是 Outlook 使用 VML（矢量标记语言）来模仿其他电子邮件客户端的正常操作。 Outlook 接受的 VML 是有限的（就像 Outlook 的所有内容一样......）并且不允许很好地堆叠，因此当您尝试执行此操作时它会中断。尝试将两个“防弹”背景图像放在一起也是如此。结局并不美好。

【讨论】：

您好，Gortonington，感谢您的快速回答。我认为这与未正确放置 VML 标签以允许这两个元素有关，但至少我现在知道您不能使用这两个元素。我实施了您在 Acid 上的电子邮件中提出的建议，现在在 Outlook 中得到以下信息：cdn.pbrd.co/images/1fQ6AGyJ.png ...是否有可能让它出现在文章中？
在 TD 上添加填充以充实按钮。在 Outlook 上，虽然这将不可点击。你也可以使用在 a 标签内为文本的左侧和右侧创建可点击的空间。

【解决方案2】：

您遇到问题的原因很可能是由于“防弹”选项的包含 VML 对象使用：

<v:textbox>

VML 中的文本框只应包含非 VML 元素，即您不能在文本区域中为形状放置另一个形状。

<v:rect>
  <v:textbox>
    <v:roundrect>
    </v:roundrect>
  </v:textbox>
</v:rect>

这是您当前拥有的非常粗略的表示，使用上面的逻辑被认为是无效的。

您可以做的是让一个 VML 图像保存您的背景图像，该图像位于包含您的内容和按钮的 HTML 区域的后面。

<table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="position:relative;">
      <!--[if gte mso 9]>
      <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;"
      <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            your content here, including your VML button
          </td>
        </tr>
      </table
    </td>
  </tr>
</table>

这种方法有一些严重的不灵活，但它几乎是唯一的分层 VML 对象的方法，而不必大惊小怪地使用

<v:group>

请注意，当在 VML 元素上使用负 z-index 并在电子邮件正文上使用背景色时，图像将位于背景色后面：|

希望这会有所帮助。

编辑：

只是为了参考提到的另一点，堆叠背景图像。如果出于某种原因您想要堆叠多个 .png，或者说例如在背景图像上放置一个圆形，您希望在该背景图像上叠加文本。您可以在顶部堆栈中添加多个图像：

<table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="position:relative;">
      <!--[if gte mso 9]>
      <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;" />
      <v:image src="...yourroundel.jpg" style="position:absolute;top:0;left:0;z-index:-2;" />
      <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            your content here, including your VML button
          </td>
        </tr>
      </table
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

我遇到了同样的问题，唯一的解决方法是将按钮的 VML (<v:roundrect ...>) 在关闭另一个 VML 之后。这样它就不是嵌套的（Outlook 不喜欢嵌套的 VML，它看起来，而且似乎真的不知道如何处理 <v:group> 否则看起来很有希望。）

即您是否为背景图像以及除 Outlook 以外的所有按钮（使用mso-hide:all）编写代码，然后结束所有这些。

就在关闭背景图像代码的</td> 之前，添加您的<v:roundrect> 代码，并将其添加到样式属性中：position:absolute;top:300px;left:200px;"——您需要将顶部和左侧调整为根据你的情况。这可能需要<v:image> 也有style="position:absolute"。

由于这是事实发生后的 5 年，我不会提供具体答案，而是在这里发布以供将来参考。

我的完整通用示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <!--[if (gte mso 9)|(IE)]>
  <style type="text/css">
  table {border-collapse: collapse !important;}
  </style>
  <![endif]-->
  <!--[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
    <body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#F6F6F6;">
    <center id="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#F6F6F6">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;font-size:14px;color:#111826;margin:0 auto;width:100%;max-width:600px;">
                <tr>
                                    <td class="bodyPadding" width="100%" style="padding:30px 40px;">
                                        <p style="margin:0 0 15px 0;font-size:23px;line-height: 26px;"><strong>xyz</strong></p>
                                    </td>
                                </tr>
<tr>
                        <!-- START BACKGROUND --><td bgcolor="#27313D" background="https://via.placeholder.com/600x255" width="600" height="255" valign="top" style="background-image: url('https://via.placeholder.com/600x255');background-repeat: no-repeat;background-position: center;background-size: cover;background-color:#27313D;width:100%;height:auto;padding:0;">
                        <!--[if mso]>

                        <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 450pt; height: 191pt;" src="https://via.placeholder.com/600x255" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 450pt; height:191pt;">
                        <v:fill  opacity="0%" color="#27313D"  />
                        <v:textbox inset="0,0,0,0">
                        <![endif]-->
                        <div>
                            <table role="presentation" width="100%" style="width:100%;font-size:16px;color:#ffffff;font-family:Arial, sans-serif;" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td class="bodyPadding" width="100%" style="padding:30px 40px;">
                                        <p style="margin:0 0 15px 0;font-size:23px;line-height: 26px;"><strong>xyz</strong></p>
                                        <p style="margin:0 0 15px 0;line-height: 24px">We're exploring the weird and wonderful ways you can boost your wellness. If you're eligible, you can discover more reasons to be good to yourself with Live Better.</p>
                                        <!-- START BUTTON (NON-OUTLOOK) --><div>
                                            <a href="https://www.google.com.au" style="background-color:#2e92e9;border:none;border-radius:50px;color:#ffffff;display:inline-block;font-family:lft-etica, Arial, sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Find out more</a>
                                        </div>  
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </v:textbox>
                        </v:fill>
                        </v:rect>
                        </v:image>
                        <!-- START BUTTON (OUTLOOK)--><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://www.google.com.au" style="height:50px;width:200px;position:absolute;top:185px;left:40px;" arcsize="100%"  fillcolor="#2e92e9" stroke="false">
                        <center style="color:#ffffff;font-family:Arial, sans-serif;font-size:16px;font-weight:bold;">Find out more</center>
                        </v:roundrect>
                        <![endif]-->
                        </td>
                    </tr>
            </table>
        </div>
    </center>
</body>
</html>

【讨论】：