如何修复HTML邮件中多边形图片内数字的错位问题

问题根源 #

1. 邮件客户端（如Outlook、Gmail）对CSS flexbox、transform这类现代CSS属性支持极差，你原布局依赖flex和transform: translate(-50%, -50%)实现居中，在邮件环境下大概率失效
2. 第一个<span>标签内存在无效乱码字符，会干扰样式解析逻辑
3. 未给图片指定固定宽高，部分客户端会自动缩放图片，导致序号位置偏移

修复方案 #

改用邮件开发通用的表格布局实现精准居中，同时修正语法错误：

• 用嵌套表格替代flex容器，利用表格的align="center"和valign="middle"属性实现序号居中
• 移除所有flex相关样式和transform属性
• 给图片设置固定宽高，避免客户端自动缩放导致错位
• 删除<span>标签内的无效乱码

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tbody>
      <tr>
        <td align="center" style="padding:0 60px 35px 60px;">
          <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
              <tr>
                <td style="padding-bottom: 10px;">
                  <p style="color:#181C32; font-size: 18px; font-weight: 600; margin-bottom:13px; margin-top:0;">What’s next?</p>
                  <table cellpadding="0" cellspacing="0" border="0" style="background: #F9F9F9; border-radius: 12px; padding:35px 30px;">
                    <tbody>
                      <!-- 步骤1 -->
                      <tr>
                        <td valign="top" style="padding-bottom: 15px;">
                          <table cellpadding="0" cellspacing="0" border="0" style="margin-right:13px;">
                            <tbody>
                              <tr>
                                <td align="center" valign="middle" width="40" height="40" style="position: relative;">
                                  <img alt="container" src="https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png" width="40" height="40" style="display:block;" />
                                  <span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600;">1</span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                        <td valign="top">
                          <!-- 可添加步骤描述文本 -->
                        </td>
                      </tr>
                      <!-- 步骤2 -->
                      <tr>
                        <td valign="top" style="padding-bottom: 15px;">
                          <table cellpadding="0" cellspacing="0" border="0" style="margin-right:13px;">
                            <tbody>
                              <tr>
                                <td align="center" valign="middle" width="40" height="40" style="position: relative;">
                                  <img alt="container" src="https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png" width="40" height="40" style="display:block;" />
                                  <span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600;">2</span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                        <td valign="top">
                          <!-- 可添加步骤描述文本 -->
                        </td>
                      </tr>
                      <!-- 步骤3 -->
                      <tr>
                        <td valign="top">
                          <table cellpadding="0" cellspacing="0" border="0" style="margin-right:13px;">
                            <tbody>
                              <tr>
                                <td align="center" valign="middle" width="40" height="40" style="position: relative;">
                                  <img alt="container" src="https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png" width="40" height="40" style="display:block;" />
                                  <span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600;">3</span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                        <td valign="top">
                          <!-- 可添加步骤描述文本 -->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

额外注意事项 #

• 邮件开发必须使用内联样式，不要用外部样式表或内部<style>标签（部分客户端不支持）
• 所有表格需设置cellpadding="0" cellspacing="0" border="0"，避免默认间距干扰布局
• 图片必须添加display:block;，防止部分客户端在图片下方生成多余空白

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