HTML邮件模板中position:absolute失效，如何实现指定方形边框？

邮件客户端对CSS高级属性支持极有限，position:absolute和transform在Gmail、Outlook这类主流客户端里基本不生效，必须用表格布局来实现你要的小边框效果，这是邮件模板兼容所有客户端的标准方案。

替换后的标题区域代码 #

把你原代码中标题所在的<tr>和<td>替换成以下内容，用嵌套表格实现左侧的L型小边框：

<tr bgcolor="#112369">
  <td style="padding:30px 48px 0px 48px;">
    <table border="0" cellpadding="0" cellspacing="0" role="presentation">
      <tr valign="middle">
        <!-- 左侧L型小边框 -->
        <td style="padding-right: 16px;">
          <table border="0" cellpadding="0" cellspacing="0" role="presentation">
            <tr>
              <td style="width:20px; height:1px; background:#00abe6;"></td>
            </tr>
            <tr>
              <td style="width:1px; height:20px; background:#00abe6;"></td>
            </tr>
          </table>
        </td>
        <!-- 标题文本 -->
        <td>
          <h1 align="left" style="padding: 5px; margin: 0px; line-height: 35px; font-family: Arial, sans-serif; font-size: 30px; color: #ffffff; font-weight: bold; text-decoration: none;">
            How ACS Time Critical achieves an end-to-end service
          </h1>
        </td>
      </tr>
    </table>
  </td>
</tr>

若需要完整方形边框 #

如果你的需求是20x20的完整方形边框，把上述代码中左侧边框的表格替换成以下内容即可：

<td style="padding-right: 16px;">
  <table border="0" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
      <td style="width:20px; height:20px; border:1px solid #00abe6;"></td>
    </tr>
  </table>
</td>

核心优势 #

• 全客户端兼容：所有邮件客户端（包括Outlook桌面版、Gmail、苹果邮件等）都能正确渲染表格布局，不会出现错位。
• 布局可控：通过调整padding数值可以灵活控制边框与标题的间距，修改宽高数值可调整边框大小。

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