Outlook 中的 UI 失真

Question

我的应用程序生成的电子邮件在浏览器中打开时会完美打开（例如 chrome）。但是，当在 Microsoft Outlook 中打开同一封电子邮件时，它会严重失真（例如文本不可见，按钮文本被换行）。任何建议可能是什么问题。我已经验证了所有脚本（js 和 css）都已经内联完成，即在 .aspx 页面上。 在 Outlook 中打开时的电子邮件：

在 Web 浏览器中打开时的电子邮件：

HTML 代码

<table class="footer" style="border-collapse: collapse;border-spacing: 0;width: 100%;background-color: #f6f9fb">
  <tbody>
    <tr>
      <td class="inner" style="padding: 0;vertical-align: top;padding-top: 60px;padding-bottom: 55px" align="center">
        <table class="cols" style="border-collapse: collapse;border-spacing: 0;width: 600px">
          <tbody>
            <tr>
              <td class="left" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 22px;text-align: left;width: 35%;padding-right: 5px;color: #b3b3b3;font-family: sans-serif">
                <table class="social" style="border-collapse: collapse;border-spacing: 0">
                  <tbody>
                    <tr>
                      <td colspan="3">
                        <p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 4px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"><strong>Test Inc.</strong><br/>1234 Road Parkway<br/>Houston, Texas 77077<br/>1-811-811-9611<br/><br/>
                          <a href="SomeURL"><img style="border: 0;-ms-interpolation-mode: bicubic;display: block;max-width: 200px" src="SomeURL" alt="myatomDirect" width="135" height="58" border="0" /></a>
                        </p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="right" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 5px;text-align: right;width: 65%;padding-left: 5px;color: #b3b3b3;font-family: sans-serif">
                <div id="campaign">
                  <p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 10px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;">You are receiving this email because you registered for an account on
                    <a href="SomeURL"></a>. Please do not reply to this message; it was sent from an unmonitored e-mail address. This message is a service e-mail related to your use of . For general inquiries or to request support with your account, please email us at
                    <a href="SomeURL">SomeURL</a>.</p>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 15px;text-align: center;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"></p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

任何建议都将受到高度赞赏。

Answer 1

由于 Outlook 使用 Microsoft Word 呈现电子邮件，因此在 Outlook 中可能会出现某些问题，而不是在任何其他电子邮件客户端中。所以你需要格外小心你的电子邮件。

<table class="cols" style="border-collapse: collapse; border-spacing: 0; width: 600;">

尝试使用不带 px 的 width 属性。 This has been discussed here

Tips to bridge Outlook hurdles

如果订阅者的设备上没有主要字体，Outlook 倾向于以 Times New Roman 呈现整个电子邮件副本，而忽略指定的后备字体。在这种情况下，您需要强制 Outlook 呈现使用条件代码指定的后备字体。

<!--[if mso]> <style> h1 {
  font-family: Primary font, Fallback font;
} </style><![endif]-->

Outlook 不会自动将文本换行到您创建的表格中。相反，表格单元格将扩大以尝试容纳较大的 URL 或其他完整的文本字符串。为避免这种情况，您可以包括以下内容：

<td style="word-break:break-all;">

希望这对你有用。