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

【问题标题】：Bulletproof background MSO distorting email layout for Outlook防弹背景 MSO 扭曲 Outlook 的电子邮件布局
【发布时间】：2018-09-21 11:31:15
【问题描述】：

我已应用 Bulletproof 背景来实现 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>

【问题讨论】：

标签： html css outlook background-image html-email

【解决方案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 隐藏它并为移动视图应用填充。

【讨论】：

【解决方案2】：

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

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

【讨论】：