Outlook邮件客户端Z-Index实现图片叠加文字失效问题排查

我需要实现浅蓝色背景上图片叠加文字的效果，这段代码在其他客户端正常，但在Outlook中文字始终无法显示。我已经调整了z-index和position属性（relative/absolute等），背景层能正常覆盖图片，但文字就是不出现。以下是相关代码：

<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile-hide-outlook wrap-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->


    <div class="mobile-hide wrap" style="background:#F3F8FA;background-color:#F3F8FA;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction: ltr; font-size: 0px; text-align: center; padding: 10px 30px;" align="center">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">

                          
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:480px;" width="480"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:220;mso-position-horizontal:center;position:absolute;top:0;width:480px;z-index:-1;" src="https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->


                          <div style="margin:0 auto;max-width:600px;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                              <tr style="vertical-align:top;">
                                <td style="background:url('https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png') no-repeat right center / cover;background-position:center;background-repeat:no-repeat;padding:0px 0px;vertical-align:top;background-size:contain;">
                                  <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:480px;" width="480" ><tr><td style="z-index:0;position:absolute;"><![endif]-->
                                  <div class="mj-hero-content" style="margin:0px auto;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                                      <tr>
                                        <td style="padding: 40px 0;">
                                          <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                                            <tr>
                                              <td align="center" style="font-size:0px;padding:0px 340px 0px 50px;word-break:break-word;">
                                                  
                                                <div class="keep-white" style="font-family:'Mulish', Arial;font-size:24px;font-weight:500;line-height:28px;text-align:left;color:#FFFFFF;">Connect with us at the Covetrus<sup style="font-size:10px;line-height:10px">®</sup> <span style="color:#27BDBE">Booth #10059</span></div>
                                                  
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                      </tr>
                                    </table>
                                  </div>
                                  <!--[if mso | IE]></td></tr></table><![endif]-->
                                </td>
                              </tr>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>

问题根源与修复方案 #

Outlook（尤其是依赖VML渲染的桌面版本）对CSS的层级和定位支持存在局限性，你的代码中有几个核心问题：

1. VML图片的层级冲突：设置z-index:-1的VML图片在Outlook中会直接覆盖后续内容，标准CSS的z-index规则对VML元素无效。
2. 字体大小继承问题：外层<td>设置了font-size:0，尽管文字容器单独定义了字体大小，但Outlook可能强制继承该属性，导致文字被隐藏。
3. 定位容器缺失：绝对定位的VML元素没有相对定位的父容器作为参照，导致布局脱离文档流，文字被覆盖。

修复后的代码 #

<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile-hide-outlook wrap-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="mobile-hide wrap" style="background:#F3F8FA;background-color:#F3F8FA;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction: ltr; font-size: 0px; text-align: center; padding: 10px 30px;" align="center">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <!-- 重构Outlook专用VML容器，添加相对定位父级 -->
                          <!--[if mso | IE]>
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:480px;" width="480">
                            <tr>
                              <td style="position:relative;">
                                <v:image style="border:0;height:220px;mso-position-horizontal:center;position:absolute;top:0;width:480px;z-index:0;" src="https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png" xmlns:v="urn:schemas-microsoft-com:vml" />
                          <![endif]-->
                          <div style="margin:0 auto;max-width:600px;position:relative;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                              <tr style="vertical-align:top;">
                                <td style="background:url('https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png') no-repeat right center / cover;background-position:center;background-repeat:no-repeat;padding:0px 0px;vertical-align:top;background-size:contain;">
                                  <!-- 给文字容器添加相对定位和层级 -->
                                  <div class="mj-hero-content" style="margin:0px auto;position:relative;z-index:1;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                                      <tr>
                                        <td style="padding: 40px 0;">
                                          <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                                            <tr>
                                              <!-- 移除font-size:0，直接设置文字容器字体大小 -->
                                              <td align="center" style="font-size:24px;padding:0px 340px 0px 50px;word-break:break-word;">
                                                <div class="keep-white" style="font-family:'Mulish', Arial;font-weight:500;line-height:28px;text-align:left;color:#FFFFFF;">Connect with us at the Covetrus<sup style="font-size:10px;line-height:10px">®</sup> <span style="color:#27BDBE">Booth #10059</span></div>
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                      </tr>
                                    </table>
                                  </div>
                                </td>
                              </tr>
                            </table>
                          </div>
                          <!--[if mso | IE]>
                              </td>
                            </tr>
                          </table>
                          <![endif]-->
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>

关键修改说明 #

• 添加相对定位父容器：在VML图片和文字的外层容器设置position:relative，让定位元素有布局参照。
• 调整层级关系：将VML图片的z-index设为0，文字容器设为z-index:1，确保文字在Outlook中显示在图片上方。
• 修复字体大小继承：移除文字所在<td>的font-size:0，直接设置实际字体大小，避免Outlook隐藏文字。
• 重构VML结构：将VML图片放在相对定位的<td>内，防止它脱离文档流覆盖文字内容。

内容的提问来源于stack exchange，提问作者Nader