电子邮件签名在浏览器和 MS Outlook 中的不同显示

Question

我使用以下代码设置了电子邮件签名的样式，它在不同的浏览器中看起来不错。但是在 MS Outlook 中，大小和行高有问题。

<table aria-hidden="true" cellspacing="0" cellpadding="0"  width="652" style="margin: 0; max-width: 100%;">
  <tr>
    <td style="font-family:'Calibri', sans-serif;font-size:10pt;overflow:hidden;padding-left:2px;word-break:normal;text-align:left;vertical-align:top" colspan="7">
      Some text<br>
    </td>
  </tr>
  <tr>
    <td rowspan="3">
        <img src="https://via.placeholder.com/133x105.png?text=Image" width="133" alt="" style="display: block; margin: 0; padding-top:2px;max-width: 100%;" />
      </td>
    <td width="111" valign="top" style="padding-left:15px;">
      <p style="font-family:'Calibri', sans-serif;font-size:10pt; margin: 0;">
        <strong>John Doe</strong><br />Text
      </p>
    </td>
    <td valign="top">
        <img src="https://via.placeholder.com/251x63.png?text=Image" width="251" alt="" style="display: block; margin: 0; max-width: 100%;" />
       </td>
    <td valign="top" colspan="4">
        <img src="https://via.placeholder.com/142x63.png?text=Image" width="142" alt="" style="display: block; margin: 0; max-width: 100%;" />
      </td>
  </tr>
  <tr>
    <td valign="top" style="padding-left:15px;" colspan="2">
        <p style="font-family:'Calibri', sans-serif;font-size:9pt;line-height:12pt;">
        1234 5698 56
        </p>
      </td>
    <td valign="top" colspan="4">
        &nbsp;
    </td>
  </tr>
  <tr>
    <td valign="top" style="padding-left:15px;" colspan="2">
        <p style="font-family:'Calibri', sans-serif;font-size:9pt;line-height:10pt;">
        j.doe@domain.de<br>Comapny Name | Street | ZIP City
        </p>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/55x29.png?text=Image" width="55" alt="youtube" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/30x29.png?text=Image" width="30" alt="Marbo Mediengruppe" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/30x29.png?text=Image" width="30" alt="Instagram" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/27x29.png?text=Image" width="27" alt="facebook" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
  </tr>
</table>

在浏览器中看起来应该是这样。

在 outlook 中看起来像

我试过设置行高，没有任何结果。

Answer 1

Outlook 使用 Word 呈现邮件正文。您可以在 Word HTML and CSS Rendering Capabilities in Outlook 文章中找到支持和不支持的 HTML 元素、属性和级联样式表属性。

电子邮件签名在浏览器和 MS Outlook 中的不同显示

Different display of email signature in browser and MS Outlook

html

css

email

outlook