电子邮件无法在Outlook中正确呈现-在移动设备上隐藏图像并且不导入字体

问题描述 投票：0回答：2

该电子邮件在Gmail和其他电子邮件客户端中可以正常工作，但在外观上却是一团糟（请参阅图片）。>>

我不知道为什么该列在Outlook中缩小了

我希望中间图像在移动设备上隐藏并在桌面上显示。

字体也不会导入到Outlook中。

赞赏任何建议。谢谢您的时间！

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head>
    


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
 <meta name="x-apple-disable-message-reformatting">
    <meta name="referrer" content="no-referrer">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>google email</title>
  

<!--[if (mso)|(mso 16)]>
<style type="text/css">
   .fallback-text { font-family: arial narrow, sans-serif; }
   body, table, td, a, span { font-family: arial narrow, Helvetica, sans-serif !important; }
   a { text-decoration: none; }
</style>
<![endif]-->


 <style type="text/css">
@media screen {
  @font-face {
    font-family: 'RobotoCondensed-Regular';
    font-style: normal;
    font-weight: 400;
    src: local('RobotoCondensed-Regular'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
  }

  .main-header-txt {
    font-size: 40px;
    font-weight: bold;
  }

  .paragraph-txt {
  ;
    font-size: 18px;

  }

  .sub-header-txt {
    padding: 10px 10px;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
  }

  .white-sub-header-txt {
    padding: 0;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    color: #ffffff;
  }

  a.links-white {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
  }

  .nohide {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
   *[class=desktop]{display:none !important;}
    *[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
    *[class="block"]{display:block !important;padding:5px;}
  .deviceWidth {
    width: 440px !important;
    margin: 0 auto!important;
    padding: 0;
  }

  .b2-padding {
    margin: 15px 0px !important;
  }

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

  .main-header-txt {
    font-size: 40px;
    padding: 20px 10px;
    line-height: 40px;
  font-weight:bold;  
  }

  .hide {
    display: none;
  }

  .img-b2 {
    height: auto;
    width: 100%;
  }

  .white-sub-header-txt {
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 50px;
    color: #ffffff;
  }

  .nohide {
    display: block;
  }

  .paragraph-txt {

    font-size: 18px;
  }
}
</style>
  </head>

<body style="width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif;">

<!---------------------------------------------------------------------- Header STARTS ---------------------------------------------------------------->
  <table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  
   <tbody><tr>
    <td width="100%" valign="top" bgcolor="#ffffff" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     <table width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
      
       <tbody><tr>
        <td width="100%" valign="top" bgcolor="#f8f8f8" style="padding-top: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
          <table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  
          
           <tbody><tr>
            <td width="100%" bgcolor="#3c3c3b" class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             <table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#3c3c3b">
              
               <tbody><tr>
                <td style="padding: 10px 20px; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" bgcolor="#3c3c3b">
                 <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-logo"><img src="https://dummyimage.com/120x90/000/fff" alt="google logo" border="0"></a>
                </td>
               </tr>
              
             </tbody></table>
            </td>
           </tr>
          
         </tbody></table>
         <!--header logo-->
        <table role="presentation" width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
          
           <tbody><tr>
            <td width="100%" class="deviceWidth" align="center" valign="top" bgcolor="#f5f5f5" style="padding-top: 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            </td>
           </tr>
           <tr>
            <td align="center" class="deviceWidth fallback-text" style="font-size: 16px; color: #272727; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: middle; padding: 10px 5px 10px 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB2</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB3</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1TAB2</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: red;">TAB4
            </a></td>
           </tr>
          
         </tbody></table>
        </td>
       </tr>
      
     </tbody></table>
    </td>
   </tr>
  
 </tbody></table>
<!---------------------------------------------------------------------- Header ENDS ---------------------------------------------------------------->

    
     <!--banner1-->
       
     <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#3b3b3c" style="border-collapse: collapse; background-color: #3b3b3c; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    
     <tbody><tr>
      <td class="mobile" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden;">
       <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
        <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Banner1-IMAGE">
         <img width="100%" max-width="640px" src="https://dummyimage.com/969x626/000/fff" alt="" border="0" style="display:block; width:100%;max-width:640px;" class="deviceWidth">
        </a>
       </p>
      </td>
     </tr>
  
  </tbody></table>
   
    <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#978B8B" style="border-collapse: collapse; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    
     <tbody><tr>
     
      <td colspan="3" width="100%" class="deviceWidth fallback-text" style="text-decoration: none; text-underline: none; color: #ffffff; font-weight: bold; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
        <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="30" style="height: 30px;  mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
        
      <span class="main-header-txt">
     
        <b>WRAP UP</b>
         
         </span>
          
           <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="10" style="height: 10px;  mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
      </td>
     </tr>
     
     <tr>
     <td width="5%"></td>
      <td width="90%" style=" color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; vertical-align: top; font-weight: 300; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
      <span class="paragraph-txt">
   DummyText
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
     </span>
     </td>
       <td width="5%"></td>
     </tr>
       
          <tr height="60">
      <td colspan="3" class="fallback-text" style="font-size: 16px; color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; text-decoration: underline; vertical-align: top; padding: 0px 15px 15px 15px; font-weight: bold; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" line-height:50px;="" bgcolor="#978B8B" align="center" valign="top">
      
 <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
 
    
   <table class="fullwidth" style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td></tr></tbody></table>
      </td>
     </tr>
     
 
    
   </tbody></table>
   
   
       <!--end banner 1-->
        
        <!--spacer-->
         <table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
         
         
       <!-- banner 2-->
   
   <table height="250" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3b3b3c" style="border-collapse: collapse; margin: 10px auto; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     
      <tbody><tr>
       <td class="center" style="padding: 0 0 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
       
        <table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
             <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Split-Banner-Image1">
              <img width="270" height="250" src="https://dummyimage.com/540x500/000/fff&amp;text=left" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="img-b2">
             </a>
            </p>
           </td>
          </tr>

        </tbody></table>
        
         <table width="100" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="hide" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
             <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Split-Banner-Image1">
              <img width="100" height="250" src="https://dummyimage.com/200x500/000/fff&amp;text=middle" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="">
             </a>
            </p>
           </td>
          </tr>
    
        </tbody></table>


        <table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="right" bgcolor="#3b3b3c" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
         
          <tbody><tr>
           <td width="270" align="center" class="fallback-text" style="text-align: center; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <br>
            <br>
           <p>new new new new new</p>
  
           </td>
          </tr>
         
         
         
         
          </tbody></table>
          
       </td>
      </tr>
     
    </tbody></table>
         
              <!--end banner 2-->   

   

 
<!--spacer-->
         <table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
        

<!----------------------------------------------------------------- footer STARTS here --------------------------------------------------------------------------------->
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fallback-text device" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     
      <tbody><tr>
       <td bgcolor="#363636" style="padding: 10px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             
              <tbody><tr>
               <td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 26px; vertical-align: top; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
               
                
              
                
                
                <br>
               </td>
              </tr>
             
            </tbody></table>
            <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
              <tbody><tr>
               
              </tr>
            </tbody></table>
            
               <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                 <tbody><tr>
                <td align="right" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                  <a target="_blank" href="https://itunes.apple.com/gb/app/apple-store/id1039829129?mt=8" style="border:0;"></a>
                </td>
                <td width="10" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td>
                <td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                  <a target="_blank" href="https://play.google.com/store/apps/details?id=uk.co.google.hybrid&amp;hl=en_GB" style="border:0;"></a>
                </td>
                 </tr>
               </tbody></table>

               <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                 <tbody><tr>
                <td valign="top" style="text-decoration: none; text-underline: none; font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
                </td>
                 </tr>
               </tbody></table>
               
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             
              <tbody><tr>
               <td valign="top" style="font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; line-height: 15px; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
               g xn fcn hgch c h <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none; ">%%emailaddr%%</span>
                <br><br>
                If you do not wish to receive our newsletters, please <br><br>
               chmchmcgmn
                <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none;"><font color="#999999">mhgck</font></span> hcgv
                <br><br>
               mhgcmcg <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; text-align:center;" href="http://www.google.co.uk/h/option/terms_conditions/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-termsandconditions" target="_blank"></a> &amp; <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; font-weight: normal; color: #999999; text-align:center;" href="http://www.google.co.uk/h/option/PrivacyPolicy/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-privacypolicy" target="_blank"><span style="text-decoration: underline; color: #999999">
               </span></a></td>
              </tr>
             
            </tbody></table>
            
            
            
            
            
           </td>
          </tr>
         
        </tbody></table>
       </td>
      </tr>
      
      
     
    </tbody></table>



<!----------------------------------------------------------------- footer ENDS here --------------------------------------------------------------------------------->
</body></html>

该电子邮件在Gmail和其他电子邮件客户端中可以正常工作，但从外观上看完全是一团糟（请参见图片）。我无法弄清楚为什么列在Outlook中会缩水，我想要中间图像...

html email outlook responsive-design html-email
2个回答
0
投票

当您应该在桌面上使用硬像素值时，您似乎仅使用百分比作为宽度。许多台式机客户端（特别是Outlook）需要硬像素值。您的移动设备可以使用百分比，因为所有这些客户端都读取％。

0
投票

Mailchimp仍然（2020年2月）建议使用表格和shim.gif图像进行电子邮件布局。请参阅此答案以了解某些背景-pixel.gif, why do people use it?

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.