Outlook 电子邮件呈现存在问题答案

【问题标题】：Outlook email render has issuesOutlook 电子邮件呈现存在问题
【发布时间】：2022-02-12 07:24:47
【问题描述】：

在我的 node js 应用程序中，我发送了一封电子邮件。我将 db 中的 html 内容作为 string 并用动态值替换一些变量并将其作为邮件发送。当邮件到达 gmail 时，它看起来很完美。但它在 outlook 中被毁了。

这是我来自数据库的 html 内容。

<html>
   <body>
      <table border="0" cellspacing="0" cellpadding="0" style="max-width:600px">
         <tbody>
            <tr height="15"></tr>
            <tr>
               <td>
                  <table bgcolor="#007bff" width="100%">
                     <tbody>
                        <tr>
                           <td height="45px" colspan="3"></td>
                        </tr>
                        <tr>
                           <td width="30"></td>
                           <td style="font-size:24px;color:#ffffff;line-height:1">###emailSubject###</td>
                           <td width="30"></td>
                        </tr>
                        <tr td height="20px" colspan="3"></tr>
                     </tbody>
                  </table>
               </td>
            </tr>
            <tr>
               <td>
                  <table bgcolor="#FAFAFA" width="100%">
                     <tbody>
                        <tr height="15px">
                           <td width="15px" rowspan="5"></td>
                           <td></td>
                           <td width="15px" rowspan="5"></td>
                        </tr>
                        <tr>
                           <td>
                              <table bgcolor="#FAFAFA" width="100%" cellspacing="0" cellpadding="0">
                                 <tbody>
                                    <tr height="15px">
                                       <td width="20px" rowspan="5"></td>
                                       <td></td>
                                       <td width="20px" rowspan="3"></td>
                                    </tr>
                                    <tr>
                                       <td>
                                          <p>Hi team,</p>
                                          <p>Please find below details of the new request for ###widgetTitle###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Customer Name: </strong>###customerName###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Email Address : </strong>###email###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Contact Number: </strong>###contactNumber###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Requirement : </strong>###requirement###</p>
                                          <p>Location</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Customer Address : </strong> ###customerAddress###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Longitude : </strong> ###longitude###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Latitude : </strong> ###latitude###</p>
                                          </p></p>
                                          <p>Marketing Agent Details</p>
                                          <p><strong style="font-size:12px;font-weight:bold">MA ID : </strong>###maId###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Name : </strong>###fullName###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Contact Number : </strong>###maContact###</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Email : </strong>###maEmail###</p>
                                          <p>Contact the  team for more information.</p>
                                          <p><strong style="font-size:12px;font-weight:bold">Email address:</strong> sample email (Biz Hrs)</p>
                                          <p><b><i>This is an auto generated email sent by the Project name : do not reply or forward this email. </i></b></p>
                                          <p>Thank You,</p>
                                          <p>Team Project name</p>
                                       </td>
                                    </tr>
                                    <tr height="30px"></tr>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                        <tr height="30px"></tr>
                     </tbody>
                  </table>
               </td>
            </tr>
            <tr height="15"></tr>
         </tbody>
      </table>
   </body>
</html>

这是我在 gmail 中收到的邮件。

这就是我的观点。

我读了一点，据我所知，这在大部分时间都发生在 Outlook 中。但我找不到任何适合我的解决方案。

我该如何解决这个问题？请帮忙。

【问题讨论】：

见Word HTML and CSS Rendering Capabilities in Outlook

标签： html node.js email outlook html-email

【解决方案1】：

Windows 上的 Outlooks 使用 Word 作为呈现引擎。而且他们不太擅长渲染 HTML。您的代码中有几处在 Outlook 中存在问题：

仅自最新版本 (Outlook 2019) 起支持max-width:600px。最好设置一个固定宽度（width:600px）并添加一个max-width:100%。
您的代码中存在直接的代码错误（如 <tr td height="20px" colspan="3"></tr>），可能会使 Outlook 出错。
使用空单元格和行作为间距不是一个好主意。（而且我认为您的rowspan 的值不正确。）最好在<td> 上使用padding。

下面是使用 Outlook 快速重写代码的方法。

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head></head>
<head>
   <meta charset="UTF-8" />
   <title>###emailSubject###</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
   <!--[if mso]>
   <xml>
   <o:OfficeDocumentSettings>
      <o:PixelsPerInch>96</o:PixelsPerInch>
   </o:OfficeDocumentSettings>
   </xml>
   <![endif]-->
</head>
<body style="padding:0; margin:0; -webkit-text-size-adjust:none; text-size-adjust:none; background:#fff;">
   <div lang="en" style="background:#fff;">
      <table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0 auto; width:600px; max-width:100%;">
         <tr>
            <td style="padding:15px;">
                <table border="0" cellspacing="0" cellpadding="0" style="width:100%; background:#007bff;">
                  <tr>
                     <td style="padding:45px 30px 20px;">
                        <h1 style="margin:0; font:bold 24px/24px sans-serif; color:#fff;">###emailSubject###</h1> 
                     </td>
                  </tr>
               </table> 
               <table border="0" cellspacing="0" cellpadding="0" style="width:100%; background:#fafafa;">
                  <tr>
                     <td style="padding:30px 35px 50px; font:16px/1.25 sans-serif;">
                        <p>Hi team,</p>
                        <p>Please find below details of the new request for ###widgetTitle###</p>
                        <p><strong style="font-size:12px;">Customer Name: </strong>###customerName###</p>
                        <p><strong style="font-size:12px;">Email Address : </strong>###email###</p>
                        <p><strong style="font-size:12px;">Contact Number: </strong>###contactNumber###</p>
                        <p><strong style="font-size:12px;">Requirement : </strong>###requirement###</p>
                        <p>Location</p>
                        <p><strong style="font-size:12px;">Customer Address : </strong> ###customerAddress###</p>
                        <p><strong style="font-size:12px;">Longitude : </strong> ###longitude###</p>
                        <p><strong style="font-size:12px;">Latitude : </strong> ###latitude###</p>
                        <p>Marketing Agent Details</p>
                        <p><strong style="font-size:12px;">MA ID : </strong>###maId###</p>
                        <p><strong style="font-size:12px;">Name : </strong>###fullName###</p>
                        <p><strong style="font-size:12px;">Contact Number : </strong>###maContact###</p>
                        <p><strong style="font-size:12px;">Email : </strong>###maEmail###</p>
                        <p>Contact the Marketplace team for more information.</p>
                        <p><strong style="font-size:12px;">Email address:</strong> support.marketplace@dialog.lk (Biz Hrs)</p>
                        <p><b><i>This is an auto generated email sent by the Marketplace : do not reply or forward this email. </i></b></p>
                        <p>Thank You,</p>
                        <p>Team Marketplace</p>
                     </td>
                  </tr>
               </table> 
            </td>
         </tr>
      </table>
   </div>
</body>
</html>

如果您想了解有关电子邮件编码的更多信息，我写了Email Coding Guidelines 以帮助您走上正轨。

【讨论】：

感谢您的回答。它帮助我解决了很多问题。但我仍然有一些内容问题
您能详细说明一下新的代码示例和屏幕截图吗？