Шаблон электронной почты Salesforce неправильно отображается в Outlook 2016

Я создал шаблон электронной почты с помощью Marketing Cloud. Когда я отправил его себе с помощью Outlook Web App, все выглядело хорошо (первое изображение), однако, когда я использовал Microsoft Outlook 2016, все было не очень хорошо (второе изображение). Я погуглил, но результаты не очень помогли. Буду признателен за любую помощь.Через Outlook Web Access (хорошо)

Через Microsoft Outlook 2016

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      ReadMsgBody{ width: 100%;}
      .ExternalClass {width: 100%;}
      .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
      body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
      p { margin: 1em 0;}
      table td { border-collapse: collapse;}
      img {outline:0;}
      a img {border:none;}
      @-ms-viewport{ width: device-width;}
    </style>
    <style type="text/css">
      @media only screen and (max-width: 480px) {
        .container {width: 100% !important;}
        .footer { width:auto !important; margin-left:0; }
        .mobile-hidden { display:none !important; }
        .logo { display:block !important; padding:0 !important; }
        img { max-width:100% !important; height:auto !important; max-height:auto !important;}
        .header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
        .photo img { width:100% !important; max-width:100% !important; height:auto !important;}
        .drop { display:block !important; width: 100% !important; float:left; clear:both;}
        .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
        .nav4, .nav5, .nav6 { display: none !important; }
        .tableBlock {width:100% !important;}
        .responsive-td {width:100% !important; display:block !important; padding:0 !important; }
        .fluid, .fluid-centered {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }
        .fluid-centered {
          margin-left: auto !important;
          margin-right: auto !important;
        }
        /* MOBILE GLOBAL STYLES - DO NOT CHANGE */
        body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;}
        h1 { font-size: 22px !important; line-height: normal !important;}
        h2 { font-size: 20px !important; line-height: normal !important;}
        h3 { font-size: 18px !important; line-height: normal !important;}
        .buttonstyles {
          font-family:arial,helvetica,sans-serif !important;
          font-size: 16px !important;
          color: #FFFFFF !important;
          padding: 10px !important;
        }
        /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
      }
      @media only screen and (max-width: 640px) {
        .container { width:100% !important; }
        .mobile-hidden { display:none !important; }
        .logo { display:block !important; padding:0 !important; }
        .photo img { width:100% !important; height:auto !important;}
        .nav5, .nav6 { display: none !important;}
        .fluid, .fluid-centered {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }
        .fluid-centered {
          margin-left: auto !important;
          margin-right: auto !important;
        }
      }
    </style>
    <!--[if mso]>
      <style type="text/css">
          /* Begin Outlook Font Fix */
          body, table, td {
              font-family: Arial, Helvetica, sans-serif ;
              font-size:16px;
              color:#808080;
              line-height:1;
          }
          /* End Outlook Font Fix */
      </style>
    <![endif]-->
  </head>
  <body bgcolor="#efefef" text="#808080" style="background-color: #efefef; color: #808080; margin: 0px; padding: 20px; -webkit-text-size-adjust:none; line-height: normal; font-size: 16px; font-family:arial,helvetica,sans-serif;">
    <div style="font-size:0; line-height:0;"><custom name="opencounter" type="tracking"><custom name="usermatch" type="tracking" /></div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="center" valign="top">
          <custom type="header" />
        </td>
      </tr>
      <tr>
        <td align="center">
          <table cellspacing="0" cellpadding="0" border="0" width="600" class="container" align="center">
            <tr>
              <td>
                <!-- added the border style here -->
                <table class="tb_properties border_style" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
                  <!-- end of comment -->
                  <tr>
                    <td align="center" valign="top">
                      <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                          <!-- added padding here -->
                          <td class="content_padding" style="padding:10px;border:0px;">
                            <!-- end of comment -->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                              <tr>
                                <td align="left" class="header" valign="top">
                                  <table role="presentation" style="background-color: transparent; min-width: 100%; border-top: 0px; border-right: 0px; border-bottom: 1px solid #AEAEAE; border-left: 0px; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 0px 20px; " class="slot-styling camarker-inner"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203679" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/e284216b-10f3-4005-aab4-c13a0ee758ff.png" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="636"></td></tr></table></td></tr></table></td></tr></table>
                                </td>
                              </tr>
                              <tr>
                                <td align="left" class="" valign="top">
                                  <table role="presentation" style="border-bottom: 1px solid #AEAEAE; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="slot-styling camarker-inner"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 100%;" valign="top"><table role="presentation" style="text-align: left; background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner" align="left"><h1 style="font-family: Arial, helvetica, sans-serif; font-size: 28px; color: rgb(128, 128, 128); line-height: 1; font-weight: bold; font-style: normal; text-align: center;">
 &nbsp; Happy New Year!</h1><div>
 <span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana=""><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;Verdana&quot;,sans-serif">Dear %%=IIF(Not empty(FirstName), FirstName, '</span></span></span></span></span></span></span></span> <span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana="">colleague and friend of NALRC</span></span></span></span><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana=""><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana="">')=%%,<br>
 <br>
 As we begin year 2021, we at NALRC&nbsp;wish you&nbsp;a healthy and happy New Year, with a sincere wish that 2021 will </span><span style="font-family:&quot;Verdana&quot;,sans-serif">bring you much health, happiness and prosperity!</span></span></span></span><br>
 <br>
 <span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;Verdana&quot;,sans-serif">This year, our center will continue to work with you on unique programs&nbsp;and projects that support African language teaching and learning. A couple of </span><span style="font-family:&quot;Verdana&quot;,sans-serif">exciting new projects are underway for which we would be calling for your contributions. </span></span><span style="font-family:&quot;Verdana&quot;,sans-serif">Among our upcoming workshops are:</span></span></span><br>
 &nbsp;</span></span></span></span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 50%; padding-right: 10px;" valign="top"><table role="presentation" style="text-align: left; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="left"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
 The NALRC Annual Summer Institute</h3><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;Verdana&quot;,sans-serif">This two-week foreign language teaching methodology training program, which is organized for instructors of African languages, is packed with educative activities that allow you to participate in and gain professional development.</span></span></span></span><br>
&nbsp;</td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203681" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/1c8e33c8-9dbc-4794-8c46-fd7dd78218c3.jpg" alt="" style="display: block; height: auto; width: 100%; padding: 4px; text-align: center;" width="100%"></td></tr></table></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="left"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D"><a target="_blank" style=" font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: left; text-decoration: none; display: block; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" class="buttonstyles" href="https://nalrc.indiana.edu/prof-dev/summer-institute.html" title="" alias="" conversion="false" data-linkto="https://">Learn More and Apply</a></td></tr></table></td></tr></table></td></tr></table></td><td class="responsive-td" style="width: 50%; padding-left: 10px;" valign="top"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203683" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/3c73118a-d927-4361-8ba0-066926bf3cc4.jpg" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="557"></td></tr></table></td></tr></table><table role="presentation" style="text-align: left; background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner" align="left"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
 The Business in World Languages Workshop</h3>This workshop is designed to introduce you to the &ldquo;World Language Curriculum Framework that Incorporates Business Concept&rdquo; at the Elementary and Intermediate Levels of language instruction and train you on how to use the document.</td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="left"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D" align="center"><a target="_blank" style=" text-decoration: none; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: left; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" class="buttonstyles" href="https://nalrc.indiana.edu/prof-dev/business-in-language1.html" title="" alias="" conversion="false" data-linkto="https://">Learn More and Apply</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table role="presentation" style="background-color: transparent; border: 2px solid #000000; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 10px 11px; " class="stylingblock-content-wrapper camarker-inner"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
 <a alias="African Language Experts&amp;#x27; List" conversion="false" data-linkto="https://" href="https://hls.indiana.edu/machform/view.php?id=216441" style="color:#808080;text-decoration:none;" title="African Language Experts' List">African Language Experts' List</a></h3><div>
 <span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;Verdana&quot;,sans-serif">The NALRC is frequently contacted by different organizations and individuals to request for speakers and specialists of various African languages. We are revamping the NALRC&rsquo;s list of African language scholars, native speakers, and instructors who are available to serve as translators, interpreters for courts, hospitals, government and non-government agencies, oral proficiency testers for government agencies, and heritage learners nationwide. Please fill out this form to join the list. This list will be maintained and regularly updated by our Center. </span></span></span></span></div></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="center"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D" align="center"><a style=" text-decoration: none; display: block; font-family: Arial, helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: center; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" target="_blank" class="buttonstyles" href="https://hls.indiana.edu/machform/view.php?id=216441" title="" alias="" conversion="false" data-linkto="https://">Join the List</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
                                </td>
                              </tr>
                              <tr>
                                <td align="left" class="" valign="top">
                                  <table role="presentation" style="border-bottom: 1px solid #AEAEAE; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="slot-styling camarker-inner"><table role="presentation" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 11px; " class="stylingblock-content-wrapper camarker-inner"><br>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;Verdana&quot;,sans-serif">We invite you to <a alias="visit our website" conversion="false" data-linkto="https://" href="https://nalrc.indiana.edu/index.html" style="color:#808080;text-decoration:none;" title="visit our website"><span style="color:#2980b9;">visit our website</span></a> for important information about our current news and events, professional development opportunities, teaching and learning resources, and networks of African language professionals.</span></span></span></span><br>
&nbsp;</td></tr></table><table role="presentation" style="text-align: left; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="left"><table class="socialshare-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr> <td><table cellspacing="0" cellpadding="0" align="center"><tr><td align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0"><tr><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="facebook follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-facebook-grey-2x.png" alt="Facebook" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="twitter follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-twitter-grey-2x.png" alt="Twitter" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="pinterest follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-pinterest-grey-2x.png" alt="Pinterest" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td><td><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><a href="" alias="instagram follow"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-instagram-grey-2x.png" alt="Instagram" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></a></td></tr></table><!--[if mso]></td></tr></table><![endif]--></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
                                </td>
                              </tr>
                              <tr>
                                <td align="left" class="" valign="top">
                                  <table role="presentation" style="min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 20px; " class="slot-styling camarker-inner"><table role="presentation" style="text-align: center; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="center"><div style="text-align: center;">
 <a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a>&nbsp;&nbsp; |&nbsp;&nbsp;<a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a>&nbsp;&nbsp; |&nbsp;&nbsp;<a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a></div></td></tr></table></td></tr></table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <custom type="footer" />
        </td>
      </tr>
    </table>
  </body>
</html>


outlook html-email salesforce-marketing-cloud
person Kaveh Ekbia    schedule 22.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, у вас очень широкое изображение:

<img data-assetid="203679" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/e284216b-10f3-4005-aab4-c13a0ee758ff.png" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="636">

Что Outlook будет делать, независимо от вашего CSS (встроенного, как style="...", или встроенного CSS, как в <style>...</style>), вставьте его шириной 636 пикселей (width="..."), выталкивая шаблон по ширине, как показано на скриншоте.

Вместо этого убедитесь, что у вас установлен атрибут ширины для Outlook, а затем встроенные стили для всего остального (например, 100%, чтобы быть отзывчивым).

Возможно, есть еще слишком широкие изображения - я просто вытащил первое, что смог найти.

person Nathan    schedule 25.01.2021