为何自制邮件签名仅在Outlook及Microsoft Mail中样式失效？

问题根源 #

你的代码存在几个Outlook渲染引擎无法兼容的问题：

• HTML结构错误：外层table直接嵌套<hr>和子table，不符合规范，Outlook对结构错误容忍度极低
• 不支持的CSS属性：vw字体单位、aspect-ratio属性，Outlook桌面版基于Word渲染，不支持这些现代CSS特性
• 绝对定位滥用：position: absolute会导致Outlook中元素排版彻底混乱
• 语法错误：youtube图标对应的img标签缺失src=属性，破坏了HTML结构
• 字体兼容性：自定义字体'Oxygen'在Outlook中大概率无法加载，需改用系统安全字体

修复后的代码 #

<!-- 外层容器table，使用百分比布局兼容所有客户端 -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-height: 400px;">
  <!-- 模拟HR分隔线，避免原生HR在Outlook的兼容性问题 -->
  <tr>
    <td height="1" style="background-color: #cccccc; width: 100%;"></td>
  </tr>
  <!-- 内容容器table -->
  <tr>
    <td style="padding-top: 20px; padding-bottom: 50px; padding-left: 5%;">
      <table cellpadding="0" cellspacing="0" border="0" width="70%" style="font-family: Arial, sans-serif; font-size: 14px;">
        <tr>
          <!-- 左侧logo和社交图标列 -->
          <td width="25%" style="padding-right: 20px; vertical-align: top;">
            <img src="image1.png" alt="trq" style="max-width: 140px; height: auto;">
            <br><br>
            <a href="example.com" style="text-decoration: none;">
              <img src="ico.png" width="20" alt="instagram link" style="margin-left: 12px;">
            </a>
            <a href="example2.com/" style="text-decoration: none;">
              <img src="image2.png" width="20" alt="Primary Theory LinkedIn Link" style="margin-left: 8px;">
            </a>
            <a href="link.com" style="text-decoration: none;">
              <img src="favicon.png" width="20" alt="youtube link" style="margin-left: 8px;">
            </a>
          </td>
          <!-- 分隔竖线列 -->
          <td width="5%" style="border-left: 2px solid #f1451e; vertical-align: top;"></td>
          <!-- 右侧联系方式列 -->
          <td style="vertical-align: top; padding-left: 10px;">
            <a href="example3.com" style="text-decoration: none; color: #000000;">
              <img src="phone.com" height="10" alt="Orange Phone Icon" style="vertical-align: middle; margin-right: 4px;"> +34 (964) 40 10
            </a>
            <br><br>
            <a href="example.com" style="text-decoration: none; color: #000000;">
              <img src="image.png" height="10" alt="Orange Link Icon" style="vertical-align: middle; margin-right: 4px;"> site.com
            </a>
            <br><br>
            <a href="" style="text-decoration: none;">
              <img src="catalog.png" alt="The logo for 'Primary Theory'" style="width: 32px;">
            </a>
            <a href="" style="text-decoration: none;">
              <img src="catalog2.png" style="width: 32px; margin-left: 4px;">
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- 底部分隔线 -->
  <tr>
    <td height="1" style="background-color: #cccccc; width: 100%;"></td>
  </tr>
</table>

关键修复点说明 #

• 重构HTML结构：所有内容都包裹在合规的table层级中，避免直接嵌套非table元素
• 替换不兼容属性：用px/百分比替代vw，移除aspect-ratio和position: absolute，改用vertical-align控制垂直对齐
• 修复语法错误：补全youtube图标的src=属性
• 字体兼容：替换为Outlook支持的系统安全字体Arial, sans-serif
• 分隔线处理：用table单元格模拟分隔线，替代原生<hr>避免渲染异常
• 社交图标尺寸：改用固定px值，避免百分比在Outlook中缩放异常

内容的提问来源于stack exchange，提问作者Jota como la consonante