为 Outlook Mac OS 格式化 html 电子邮件签名 - 我做错了什么？

问题描述 投票：0回答：1

我编辑了这个纯 html Codepen 模板，为我的办公室制作电子邮件签名。

我尝试将我的 html 电子邮件签名导入 Outlook - 我在 Chrome 中打开我的 index.html 文件，使用 Cmd + A 选择我的代码，使用 Cmd + C 复制，然后粘贴到 Outlook 签名界面，并选择“保留源格式” — 使用据称正确的方法将 html 电子邮件签名导入到 Mac OS 的 Outlook 中。我的签名看起来一团糟，被压扁了，就像 /src 文件夹中的 index.html 文件一样。

my email signature in Outlook

我尝试使用模板的index.html文件进行复制/粘贴方法，从Chrome到Outlook有一些样式更改，但间距保持不变。

template email signature in Outlook

我的代码是否缺少某些内容？我能看出我的签名和模板之间的唯一区别是，我在 

<table>
中有完整的电子邮件签名，而模板仅使用徽标/社交图标部分的表格。蒂娅！

index.html代码

screenshot of my email signature's Chrome display

<html lang="en">
<body style="color:#063059; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; font-family:Arial, Helvetica, sans-serif; line-height:1.5;">
  
  <table width="350" border="0" cellspacing="0" cellpadding="0" role="presentation">
    
  <tbody>
    
  <tr>
    <td width="75">
      <a href="https://example.com/"><img src="https://i.imgur.com/Bh7eDEg.png" width="65" height="64.5" alt="State of Illinois Seal"/></a>
    </td>
    <td width="275" heigh="100%">
      <p>
        <span style="font-weight:700; font-size: 16px;">John Smith </span><span style="font-size: 16px; font-weight:700">(He / Him)</span>
        <br class="Apple-interchange-newline">
        <span style="font-size:15px; font-weight:700;">Digital Media Specialist</span>
        <br class="Apple-interchange-newline">
        <span style="font-size:15px; font-weight:700;">Office of My Boss</span>
      </p>
    </td>
  </tr>

  <tr>
    <td colspan="2" style="border-top: 1px solid black;">
      <p>
        <span style="font-size:14px;">Office: <a style="color:#1C6AB3; padding-right:6px;" href="tel:15162843300"><span> 516-284-3300</span></a><span aria-hidden="true">|&nbsp;</span><span style="font-size:14px; padding-left:2px;">Cell: <a style="color:#1C6AB3;" href="tel:15162843300"><span> 516-284-3300</span></a>
        <br class="Apple-interchange-newline">
        <span style="font-size:14px; padding-right:2px;">1234 W Monroe St </span><span aria-hidden="true">|&nbsp;</span><span style="font-size:14px; padding-left:2px;">Chicago, IL 60661</span>
      </span></span></p>
    </td>
  </tr>

  <tr>
    <td colspan="2">
      <a href="https://www.facebook.com/moreycreative"><img src="https://i.imgur.com/p9Od0MU.png" alt="Facebook Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://www.linkedin.com/company/moreycreative"><img src="https://i.imgur.com/fE7B4qo.png" alt="LinkedIn Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://www.instagram.com/moreycreative/"><img src="https://i.imgur.com/NRTdN9c.png/" alt="Instagram Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://twitter.com/MoreyCreative"><img src="https://i.imgur.com/aAi8ZLc.png" alt="Twitter Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://www.moreycreative.com/inbound-and-down"><img src="https://i.imgur.com/kfXPUuX.png" alt="Podcast Microphone Icon" width="25" height="25" style="padding-right:3px; vertical-align: middle;"></a>
      <span aria-hidden="true" style="vertical-align: middle;">|&nbsp;</span>
      <a style="vertical-align: middle; color:#1C6AB3; font-weight:700; font-size: 14px;" href="https://example.com/">example.com</a>
    </td>
  </tr>
    
  <tbody>
      
</table> 
 
</body>
  
</html>
html-table outlook html-email styling email-signature
1个回答
0
投票

您只想修复水平间距吗？也许在段落中内联一个值，即 

<p style="margin:0 0 15px 0;">

不同的程序对默认边距和填充有不同的解释或重置，因此最好设置它们（和内联）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.