转发时内容彼此中断

时间:2018-11-29 05:38:05

标签: css html-table outlook html-email

我正在使用Marketo应用程序创建电子邮件模板。创建完成后,我尝试向自己发送示例邮件,一切看起来都很不错:

looks good

如您所见,[表]的所有元素都显示良好,完整且整洁,但是当我尝试转发同一封电子邮件时,会发生这种情况:

not good

如您所见,标头已从主体断开。页脚也会发生这种情况。为什么会这样?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
    <title>Mizona</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <style type="text/css">
      #logo img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: block;
      }

      td {
        word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; 
      }
      
      #content-subsection-right-img td, #content-subsection-plain td, #content-subsection-left-img td { 
        color: #555555;
      }

      .desktop-only {
        display: block;
      }

      .mobile-only {
        display: none;
      }

      .align-center {
        text-align: center; 
      }

      .align-right {
        text-align: right; 
      }


      .no-spacing {
        padding:0px;
        margin: 0px;
      }
      
      .pad-cell5 td{
        padding: 5px !important;
      }
      
      .mobile-center {
        text-align: left !important;
      }

      #socialicons img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: inline-block !important;
        border: none;
      }
      
      img {
        max-width: 100%;
      }
      
      #graphic img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        max-width: 100%;
        float: none !important;
        clear: both;
        display: inline-block !important;
      }

      table[class="body"] .columns td.one {
        width: 8.333333% !important;
      }
      table[class="body"] .column td.one {
        width: 8.333333% !important;
      }
      table[class="body"] .columns td.two {
        width: 16.666666% !important;
      }
      table[class="body"] .column td.two {
        width: 16.666666% !important;
      }
      table[class="body"] .columns td.three {
        width: 25% !important;
      }
      table[class="body"] .column td.three {
        width: 25% !important;
      }
      table[class="body"] .columns td.four {
        width: 33.333333% !important;
      }
      table[class="body"] .column td.four {
        width: 33.333333% !important;
      }
      table[class="body"] .columns td.five {
        width: 41.666666% !important;
      }
      table[class="body"] .column td.five {
        width: 41.666666% !important;
      }
      table[class="body"] .columns td.six {
        width: 50%;
      }
      table[class="body"] .column td.six {
        width: 50%;
      }
      table[class="body"] .columns td.seven {
        width: 58.333333% !important;
      }
      table[class="body"] .column td.seven {
        width: 58.333333% !important;
      }
      table[class="body"] .columns td.eight {
        width: 66.666666% !important;
      }
      table[class="body"] .column td.eight {
        width: 66.666666% !important;
      }
      table[class="body"] .columns td.nine {
        width: 75% !important;
      }
      table[class="body"] .column td.nine {
        width: 75% !important;
      }
      table[class="body"] .columns td.ten {
        width: 83.333333% !important;
      }
      table[class="body"] .column td.ten {
        width: 83.333333% !important;
      }
      table[class="body"] .columns td.eleven {
        width: 91.666666% !important;
      }
      table[class="body"] .column td.eleven {
        width: 91.666666% !important;
      }
      table[class="body"] .columns td.twelve {
        width: 100% !important;
      }
      table[class="body"] .column td.twelve {
        width: 100% !important;
      }

      .pad-right-5 {
        padding-right: 5px;
      }

      .pad-right-10 {
        padding-right: 10px;
      }

      .pad-top-10 {
        padding-top: 10px;
      }

      @media only screen and (max-width: 600px) {

        .pad-right-10 {
          padding-right: 0px;
        }

        .desktop-only {
          display: none !important;
        }

        .mobile-only {
          display: block;
        }

        #logo img {
          width: 100% !important;
        }

        #logo-mobile img {
          width: 80% !important;
        }
        #graphic img {
          width: 100% !important;
          height: auto !important;
        }
        *[class].center {
          text-align:center !important;
          margin:0 auto !important;
        }
        *[class].bottom-pad{ padding-bottom:35px !important;}
        table[class="body"] table.columns td {
          width: auto !important;
        }

        .social-icon td img {
          width: 40px !important;
          height: 40px !important;
        }
      }
    </style> 
  </head> 
  <body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; color: #555555;"> 
    <table class="body" style="border-spacing:0; border-collapse:collapse;  vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE"> 
      <tbody> 
        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
          <td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; "> 
            <center style="width:100%; min-width:600px; "> 
              <table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF"> 
                <tbody> 
                  <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top" width="600"> 
                      <table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
                        <tbody> 
                          <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                            <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                              <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; "> 
                                <tbody> 
                                  <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                                      <div class="mktEditable" id="logo" style="" mktoname="logo">
                                        <p style="margin:0px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-digest-general-v2.1.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /> </p>
                                      </div></td> 
                                  </tr> 
                                </tbody> 
                              </table> </td> 
                          </tr> 
                        </tbody> 
                      </table> </td> 
                  </tr> 
                </tbody> 
              </table> 
              <table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
                <tr class="mktoModule" id="title-date" mktoname="title/date"> 
                  <td> 
                    <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"> 
                      <tbody> 
                        <tr bgcolor="#2EA049"> 
                          <td style="color:#ffffff; padding: 10px 40px" align="left" valign="middle"> 
                            <div class="mktEditable" id="title" style="" mktoname="title-date">
                              <p style="margin: 0px;">Volume 4 | Issue 11 | 2018</p>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>
                <tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="content-general" mktoname="general content"> 
                  <td style="padding: 20px 40px"> 
                    <div class="mktEditable" id="intro" style="margin-top: 20px;" mktoname="intro">
                      <h3 style="color: #88c34d; text-align: center;">Trust the Asset. Trust the Transaction.™</h3> 
                      <p>More and more players across industries are realizing the advantages of digital transformation, making it a competitive necessity for companies to harness digital solutions. Our own rapid growth mirrors this trend, with eOriginal recently being named one of the fastest growing companies in the country.</p> 
                      <p>Entering into 2019, eOriginal knows becoming part of the auto finance digital ecosystem is essential to achieving your business goals. To take full advantage of this continued growth, please join our upcoming webinar which is focus on the auto finance industry. Learn more about digital best practices and how originators and lenders can prioritize tech stack building and expansion.</p>
                    </div> </td> 
                </tr>
                <tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title" mktoname="subsection-title"> 
                  <td valign="middle" style="padding: 10px 40px;"> 
                    <div class="mktEditable" id="title-subsection" mktoname="title-subsection" style="display:inline-block;">
                      <p style="margin: 0px; display: inline;"><b>eOriginal Named to Deloitte's Technology Fast 500™ </b></p>
                    </div> </td> 
                </tr>
                <tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="mod-subsection-left-img-1"> 
                  <td style="padding: 20px 40px"> 
                    <div class="mktEditable" id="content-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="content-subsection-left-img">
                      <table class="columns"> 
                        <tbody> 
                          <tr valign="top"> 
                            <td width="260" class="pad-right-10"> <p class="no-spacing"><img src="https://www.eoriginal.com/wp-content/uploads/2017/07/Random-image-_0005_iStock-511197926-1024x683.jpg" width="100%" /></p> </td> 
                            <td width="260"> <p class="no-spacing">For the second consecutive year, eOriginal was named to Deloitte’s Technology Fast 500™, a ranking of the 500 fastest growing technology, media, telecommunications, life sciences and energy tech companies in North America. eOriginal's growth of 266 percent reaffirms its status as a leader in digital lending transformation and management.</p> <p class="no-spacing"><a href="https://www.eoriginal.com/press-releases/eoriginal-ranked-on-deloittes-2018-technology-fast-500/" style="text-decoration: none; color: #2ea049;" target="_blank"><b>Read more</b></a></p> </td> 
                          </tr> 
                        </tbody> 
                      </table>
                    </div> </td> 
                </tr>
                <tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-titlef7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="subsection-title-1"> 
                  <td valign="middle" style="padding: 10px 40px;"> 
                    <div class="mktEditable" id="title-subsectionf7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="title-subsection" style="display:inline-block;">
                      <p style="margin: 0px; display: inline;"><b>Live Webinar: Building an End-to-End eContracting Experience in Auto Finance</b></p>
                    </div> </td> 
                </tr>
                <tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="mod-subsection-right-img-1"> 
                  <td style="padding: 20px 40px"> 
                    <div class="mktEditable" id="content-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="content-subsection-right-img">
                      <table class="columns"> 
                        <tbody> 
                          <tr valign="top"> 
                            <td width="260" class="pad-right-10"> <p class="no-spacing">Whether you provide direct or indirect lending, meeting the demands of today’s auto finance market means going digital is no longer a matter of ‘if’ but ‘when’. Join defi SOLUTIONS Chief Operating Officer Lana Johnson and eOriginal's Director of FinTech Strategies John Jacobs for insights on end-to-end digital auto financing processes, from origination to asset monetization through warehouse financing or securitization.&nbsp;&nbsp;</p> <p class="no-spacing"><a href="http://info.eoriginal.com/W-DEC-V-18_Live-Event-LP.html?Lead_Source=Website&amp;Specific_Lead_Source=W-DEC-V-18&amp;Digital_Source=Website" style="text-decoration: none; color: #2ea049;" target="_blank"><b>Register Now</b></a></p> </td> 
                            <td width="260"> <p class="no-spacing"><br /><a href="http://info.eoriginal.com/W-OCT-MG-18_Live-Event-LP.html?Lead_Source=Webinar&amp;Specific_Lead_Source=W-OCT-MG-18&amp;Digital_Source=N-SEP-G-18" target="_blank"></a></p> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Cover Defi Solutions.jpg" height="151" width="269" /></p> </td> 
                          </tr> 
                        </tbody> 
                      </table>
                    </div> </td> 
                </tr>
                <tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="subsection-title-clone"> 
                  <td valign="middle" style="padding: 10px 40px;"> 
                    <div class="mktEditable" id="title-subsection3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="title-subsection" style="display:inline-block;">
                      <p style="margin: 0px; display: inline;"><b>Case Study: MotoLease Selects eOriginal to Digitally Transform Powersports Financing</b></p>
                    </div> </td> 
                </tr>
                <tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-img" mktoname="mod-subsection-left-img"> 
                  <td style="padding: 20px 40px"> 
                    <div class="mktEditable" id="content-subsection-left-img" mktoname="content-subsection-left-img">
                      <table class="columns"> 
                        <tbody> 
                          <tr valign="top"> 
                            <td width="260" class="pad-right-10"> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/eO_Job-327_CS_MotoLease_COVER_01112018.png" width="178" height="252" style="display: block; margin-left: auto; margin-right: auto;" /></p> </td> 
                            <td width="260"> <p class="no-spacing">Driven by a vision to disrupt the powersports leasing segment, MotoLease turned to eOriginal to adopt best practices in eSignature and digital asset management. This case study highlights how transformative digital lending technology drove the company's dramatic growth to corner 75 percent of the powersports leasing market. <a href="https://www.eoriginal.com/blog/motoleases-commitment-to-innovation-drives-dramatic-growth/" style="text-decoration: none; color: #2ea049;" target="_blank"><b>Read more</b></a></p> </td> 
                          </tr> 
                        </tbody> 
                      </table>
                    </div> </td> 
                </tr>
              </table> 
              <table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF"> 
                <tbody> 
                  <tr bgcolor="#2EA049"> 
                    <td class="two-column" style="font-size: 0; text-align: center;"> 
                      <!--[if (gte mso 9)|(IE)]>
                      <table width="100%">
                      <tr>
                      <td width="50%" valign="top">
                      <![endif]--> 
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody> 
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> <a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff">eOriginal.com</a> </td> 
                            </tr> 
                          </tbody> 
                        </table> 
                      </div> 
                      <!--[if (gte mso 9)|(IE)]>
                        </td><td width="50%" valign="top">
                        <![endif]--> 
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody> 
                            <tr> 
                              <td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td align="left" valign="middle" width="50"><a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody> 
                        </table> 
                      </div> 
                      <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                      <![endif]--> </td> 
                  </tr> 
                  <tr bgcolor="#353937"> 
                    <td class="two-column" style="font-size: 0; text-align: center;"> 
                      <!--[if (gte mso 9)|(IE)]>
                      <table width="100%">
                      <tr>
                      <td width="50%" valign="top">
                      <![endif]--> 
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody> 
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td> 
                            </tr> 
                          </tbody> 
                        </table> 
                      </div> 
                      <!--[if (gte mso 9)|(IE)]>
                        </td><td width="50%" valign="top">
                        <![endif]--> 
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody> 
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td> 
                            </tr> 
                          </tbody> 
                        </table> 
                      </div> 
                      <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                      <![endif]--> </td> 
                  </tr> 
                </tbody> 
              </table> 
            </center></td> 
        </tr> 
      </tbody> 
    </table>  
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

实际上您无法采取任何措施来防止这种情况。在整个电子邮件开发过程中众所周知,根据所使用的客户端,转发以任何数量的方式破坏所有电子邮件布局。

最好的选择是尝试避免建议用户转发电子邮件,而是提供“发送给朋友”的登录页面。同时通知同事/客户相同的内容,并确保彼此之间不转发。他们的替代选择是将任何测试作为附件发送,或直接从您的ESP发送测试。

有用的Litmus博客文章进一步探讨了这个问题here