Question

我已应用防弹背景来实现Outlook的背景图像。背景图片可以很好地加载，但是其样式/结构与Outlook中的样式/结构不一样。

在Gmail上的外观（我想要的样子）：

在Outlook 2007、2010、2013和2016（Windows）上的显示方式：

为什么会这样？

代码：

<!--DOCTYPE html-->
<html>

<head>
  <title></title>
</head>

<body>
  <table leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" border="0" cellpadding="0" cellspacing="0" style="width:600px; margin:0 auto; ">
    <tbody>

      <tr>
        <!-- Condition to allow background images to work in Outlook -->
        <td class="background_image-td" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" width="600" valign="top">
          <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
          <div class="background_img-container">
            <table border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <!-- Creating padding above nested div -->
                <tr>
                  <td height="30" style="height:30px;">
                    <!--PADDING-->
                  </td>
                </tr>
                <!-- Nested table for overlapping td -->
                <tr>
                  <td class="table-td" align="center">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td class="table-td">
                            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#e3e1e5" style="width:50%; opacity: 0.9; padding: 40px 40px; background-color: #e3e1e5;">
                              <tbody>
                                <tr>
                                  <td style="color: #1c9ad6; font-size:1.5rem; font-family:'Klavika', Arial,sans-serif; text-align:left; padding:20px;">How to address your taste formulation challenges.</td>
                                </tr>
                                <tr>
                                  <td style="padding:10px 0px;">
                                    <!--PADDING-->
                                  </td>
                                </tr>
                                <tr>
                                  <td class="table-td" align="center">
                                    <a href="#" alt="Discover more at SSW" target="_blank">
                                      <img src="https://storage.pardot.com/213851/80839/discover_more.png" alt="Discover more at SSW" style="width:246px;">
                                    </a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <!-- Nested table end -->
                <!-- Creating padding below nested table -->
                <tr>
                  <td height="30" style="height:30px;">
                    <!--PADDING-->
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- Nested table end -->
          </div>
          <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Answer 1

为此行VML添加高度。如果我记得，Outlook不会根据其中的内容调整VML形状。

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">

要注意的一件事是，左填充在Outlook 2013/2016的VML中不起作用。如果必须使用填充，请尝试将其替换为固定宽度td，然后使用CSS / Media Query隐藏它并将其应用于移动视图。

Answer 2

尝试添加到您的mso-fit-to-shape：true文本框样式中。这使VML适合您的内容，而无需增加高度。

<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

防弹背景MSO扭曲了Outlook的电子邮件布局

2 个答案: