Question

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

在网络浏览器中打开时发送电子邮件：

HTML代码

＆＃13;

<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>

＆＃13;

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

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;">

希望这对您有用。

UI中的UI失真

1 个答案: