HTML邮件签名在Outlook显示异常，如何适配不同邮件客户端？

核心问题原因 #

Outlook（尤其是Windows版本）采用Word的HTML渲染引擎，和Apple Mail基于的WebKit引擎差异极大，很多现代HTML/CSS特性不支持，你的代码里有几个关键问题导致显示异常：

• 外部资源无效：<link>引入的外部样式表、<script>加载的Font Awesome都会被Outlook直接忽略，完全没必要保留。
• SVG图标兼容性差：Outlook对SVG图片支持有限，部分版本会直接不显示，导致你看到的图标丢失。
• <hr>标签渲染异常：Outlook处理<hr>的逻辑很奇怪，经常出现宽度、边框不符合预期的情况。
• 图片尺寸仅用内联样式不保险：Outlook需要同时给<img>标签添加width和height属性（不能只写在style里），否则可能出现尺寸失控。
• 小数像素边框不支持：border: 0.5px这类小数像素设置，Outlook会直接忽略，导致边框不显示或者显示错误。
• 空图片src占位：底部三个<img>的src为空，Outlook会显示默认占位框，看起来像是图标丢失。
• 字体缺乏备用选项：Helvetica字体在Windows系统的Outlook里没有，会被替换成难看的默认字体。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopka</title>
  <!-- 移除外部样式和脚本，Outlook不支持 -->
</head>
<body style="margin:0; padding:0;">
  <!-- 外层表格包裹，避免Outlook添加额外边距 -->
  <table cellpadding="0" cellspacing="0" border="0" style="font-family: Helvetica, Arial, sans-serif; font-size: 9px; width: 400px;">
    <tr>
      <!-- 替换rowspan，用嵌套表格避免Outlook布局错乱 -->
      <td style="width: 150px; height: 150px; padding-right: 10px;">
        <img src="https://amrs.com.pl/wp-content/uploads/2023/04/logo.jpg" width="150" height="150" style="width: 150px; height: 150px; border:0;" alt="Logo">
      </td>
      <td valign="top">
        <table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="color: #081A45; font-size: 18px; padding-bottom: 10px;">Lorem Ipsum</td>
          </tr>
          <tr>
            <td style="padding-top:10px; padding-bottom: 5px;">
              <!-- SVG替换为PNG，同时添加width/height属性 -->
              <img src="https://amrs.com.pl/wp-content/uploads/2023/04/phone.png" width="10" height="10" style="width: 10px; height: 10px; border:0; vertical-align: middle;" alt="Telefon">
              <a style="color: black; text-decoration: none;" href="mailto:email@email.eu">+44 123 123 123</a>
            </td>
          </tr>
          <tr>
            <td style="padding-bottom: 5px;">
              <img src="https://amrs.com.pl/wp-content/uploads/2023/04/envelope.png" width="10" height="10" style="width: 10px; height: 10px; border:0; vertical-align: middle;" alt="Email">
              <a style="color: black; text-decoration: none;" href="mailto:email@email.eu">email@email.eu</a>
            </td>
          </tr>
          <tr>
            <td style="padding-bottom: 10px;">
              <img src="https://amrs.com.pl/wp-content/uploads/2023/04/globe.png" width="10" height="10" style="width: 10px; height: 10px; border:0; vertical-align: middle;" alt="Strona internetowa">
              <a style="color: black; text-decoration: none;" href="https://www.google.com">www.google.com</a>
            </td>
          </tr>
          <tr>
            <td style="color:#081A45; font-weight: bold;">Większość moich klientów pochodzi z rekomendacji. Bardzo dziękuję za każde Państwa polecenie.</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- 用表格代替hr，确保Outlook正常渲染分隔线 -->
  <table cellpadding="0" cellspacing="0" border="0" style="width: 400px; margin-top: 10px;">
    <tr>
      <td style="border-top: 1px solid #081A45; height: 1px; line-height: 1px; font-size: 1px;"></td>
    </tr>
  </table>
  <table cellpadding="0" cellspacing="0" border="0" style="font-family: Helvetica, Arial, sans-serif; font-size: 9px; width: 350px; margin-top: 10px;">
    <tr>
      <td>Google jest partnerem:</td>
    </tr>
    <tr>
      <td style="padding-top: 5px;">
        <!-- 填充有效图片地址，添加width/height属性 -->
        <img src="https://example.com/partner1.png" width="40" height="40" style="width: 40px; height: 40px; border:0; margin-right: 10px;" alt="Partner 1">
        <img src="https://example.com/partner2.png" width="40" height="40" style="width: 40px; height: 40px; border:0; margin-right: 10px;" alt="Partner 2">
        <img src="https://example.com/partner3.png" width="40" height="40" style="width: 40px; height: 40px; border:0;" alt="Partner 3">
      </td>
    </tr>
  </table>
</body>
</html>

关键修复点说明 #

• 移除外部资源：删掉<link>和<script>，Outlook不支持这些外部引用。
• 替换SVG为PNG：如果必须用SVG，建议内嵌到HTML里（把SVG代码直接写在<img>位置），否则换成PNG格式确保兼容性。
• 用表格替代<hr>：通过表格的border-top实现分隔线，Outlook能完美渲染。
• 图片添加width/height属性：在<img>标签上直接加width和height属性，配合内联style，确保尺寸不失效。
• 修复小数边框：把0.5px改成1px，Outlook不支持小数像素。
• 填充空图片src：底部三个图片要补上有效地址，避免占位符。
• 优化表格布局：把原来的rowspan改成嵌套表格，避免Outlook布局错乱。
• 添加字体备选：给font-family加上Arial作为备用，确保Windows系统能显示合适的字体。

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