HTML 电子邮件签名未在 Outlook 中呈现答案

【问题标题】：HTML Email Signature not rendering in OutlookHTML 电子邮件签名未在 Outlook 中呈现
【发布时间】：2023-03-09 06:04:01
【问题描述】：

我正在用表格编写电子邮件签名。在旧版本的 Outlook 中测试时出现问题。

这就是它的渲染方式

这就是它应该的样子

当我使用 Putsmail 测试实际代码时它工作得很好，但是当我在电子邮件客户端中粘贴签名并发送它时，它就中断了。请帮忙！

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="light dark">
   <meta name="supported-color-schemes" content="light dark">
   <title>HTML Email Template Boilerplate</title>
   <style type='text/css'>    
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
   body {
      Margin: 0;
      padding: 0;
   }
   table {
      border-spacing: 0;
   }
   td {
      padding: 0;
   }
   img {
      border: 0;
   }
   p {
      margin: 0;
      padding: 0;
   }

   @media screen and (max-width:599.98px) {
           
   }

   @media screen and (max-width:399.98px) {
           
   }
   :root {
         color-scheme: light dark;
         supported-color-schemes: light dark;
      }
   @media (prefers-color-scheme: dark) {
      
      }   
    </style>

    <!--[if (gte mso 9)|(IE)]>
      <style type="text/css">
         table {border-collapse: collapse!important;}
      </style>
   <![endif]-->


   <!-- FIXES 120 DPI-->
   <!--[if gte mso 9]>
      <xml>
      <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
      </xml>
   <![endif]-->

</head>
<body style="Margin: 0;padding:0;min-width: 100%;background-color:#ffffff;">

   <!--[if (gte mso 9)|(IE)]>
      <style type="text/css">
         body {background-color: #ffffff !important;}
         body, table, p, a, td {font-family:Arial,Helvetica,sans-serif!important;}
      </style>
   <![endif]-->

      <div style="max-width: 600px; background-color: #ffffff;">

         <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-spacing:0;
             color: #000000;" role="presentation">
            <tr>
            <td style="padding:0;">
         <![endif]-->
         
         <!-- MAIN TABLE START -->
         <table align="center" style="border-spacing:0; border-collapse: collapse; color: #000000;
         font-family: sans-serif, Arial, Helvetica!important;
         background-color: #ffffff; Margin:0; padding: 0;max-width: 600px;" role="presentation">
            <tr>
               <td style="padding: 50px 0 30px 0; background-color: #f8f8f8;">
                  <table width="600" style="width: 600px; border-spacing: 0; border-collapse: collapse;" role="presentation">
                     <tr>
                        <td width="600" style="width: 600px; padding: 0; font-size: 0; text-align: center; width: 100%; max-width: 600px; display: block;">
                              <!--[if mso]>
                              <table width="600" style="border-spacing: 0;border-collapse:collapse; width:600px; display:block;" role="presentation">
                              <tr>
                              <td width="300" align="right" valign="middle" style="padding:0;">
                              <![endif]-->
                              <table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
                                 <tr>
                                    <td  class="padding" style="padding: 10px;">
                                       <table class="content" align="right" style="border-spacing: 0;border-collapse: collapse;" role="presentation">
                                          <tr>
                                             <td style="padding: 0 0 12px 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;">
                                                <span style="font-size: 24px; margin:0;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="name">
                                                   Firstname Surname
                                                </span>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td style="padding: 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;">
                                                <span style="font-size: 24px; margin:0;color: #FF8672; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="job">
                                                   Job Title
                                                </span>
                                             </td>
                                          </tr>        
                                       </table>
                                    </td>
                                 </tr>
                              </table>

                              <!--[if mso]>
                              </td><td width="300" valign="middle" style="padding:0;">
                              <![endif]-->

                              <table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
                                 <tr>
                                    <td class="padding" style="padding: 10px">
                                       <table class="content" style="border-spacing: 0;border-collapse: collapse; text-align: left;" role="presentation">
                                          <tr>
                                             <td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
                                                <a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="mailto:firstname@productprofessionals.com">firstname@productprofessionals.com</a>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
                                                <a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="tel:+61 444 123 456">+61 444 123 456</a>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
                                                <a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="https://productprofessionals.com" target="_blank">productprofessionals.com</a>
                                             </td>
                                          </tr>       
                                       </table>
                                    </td>
                                 </tr>
                              </table>
                              <!--[if mso]>
                              </td>
                              </tr>
                              </table>
                              <![endif]-->
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>

<!-- BOTTOM IMAGE START -->
            <tr>
               <td style="padding: 0;" cellspacing="0" cellpadding="0">
                  <table width="100%" style="padding: 0; border-spacing: 0; border-collapse: collapse;" role="presentation" cellspacing="0" cellpadding="0">
                     <img src="https://i.ibb.co/CnTF0HJ/Group-584-4.png" width="640" style="width: 640px; display: block;" border="0" alt="Association of Product Professionals">
                  </table>
               </td>
            </tr>              
<!-- BOTTOM IMAGE END -->




    



         </table>
         <!-- MAIN TABLE END -->

         
         <!--[if mso 9] | (IE)>
         </td>
         </tr>
         </table>
         <![endif]-->
   </div>
</body>
</html>

【问题讨论】：

你用什么发送这个？发送时似乎正在删除 Outlook 特定代码？结构看起来不错。

标签： html css email outlook html-email

【解决方案1】：

从结构（表格）的角度来看，代码看起来很不错，但是您插入的内容比该结构大。

因此，您在 600px 的空间中插入了 640px 宽的图像，并且带有联系人详细信息的右列是 300px 空间中的 322px（注意填充：10px，以及文本宽度）。您可以在浏览器的开发者工具中轻松查看这些内容。

即使没有修复这些问题，它也对我有用，但我还不能进行完整的测试。

【讨论】：