Outlook 2019 上的额外 Space。右侧和左侧

Question

我有一个电子邮件模板。它在 Gmail（所有浏览器）和 Web Outlook（所有浏览器）中看起来很完美。

但在 Outlook 2019 中，从左侧和右侧添加了额外的白色 space。我想这与图像有关。当它们被锁定时，空白 space 不会出现。什么时候我决定在出现空白 space 时下载它们。我找不到导致此错误的代码。在 Outlook 2013 中不会发生这种情况，遵守 600px 的最大宽度。

帮我解决这个问题？我已经尝试了所有方法。

分享图片和代码：

展望 2013

展望 2019

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <title>*|MC:SUBJECT|* </title>
    <!-- utf-8 works for most cases -->
    <meta charset="UTF-8">
    <!--[if !mso]><!-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if mso]>

    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>

    <![endif]-->
    <!--[if lte mso 11]>
    <style>
      .mj-outlook-group-fix {
      width:100% !important;
      }
    </style>
    <![endif]-->

    <!--Web Fonts --->
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
    <!--<![endif]-->
    
  <style type="text/css">
    /*Outlook Reset Styles*/
    .ExternalClass p {
    margin: 0px;
    }
    .ReadMsgBody {
    width: 100%
    }   
    .ExternalClass {
    width: 100%;
    }
    .ExternalClass, .ExternalClass * {
    line-height: 100%;
    }
    .yshortcuts a {
    border-bottom: none !important;
    }
    .mobile-link--footer a {
    color: #666666 !important;
    }
    #outlook a{
            padding:0;
        }
    #body_text td {
    padding-left: 10px;
    padding-right: 10px;
    }


    /*Global Styles*/
        body{
            margin:0 auto !important;
            padding:0 !important;
            width:100% !important;
            -webkit-text-size-adjust:100%;
            -ms-text-size-adjust:100%;

            /*Default Font*/
            font-family:'Tahoma', Verdana,sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #202020;
        }
        table,td{
            border-collapse:collapse;
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        table{
            border-spacing:0 !important;
            border-collapse:collapse !important;
            table-layout:fixed !important;
            margin:0 auto !important;
        }
        img{
            border:0;
            height:auto;
            line-height:100%;
            outline:none;
            text-decoration:none;
            display: block;
            -ms-interpolation-mode:bicubic;
        }
        p{
            display:block;
            margin:2px 0;
        }
        a{
            text-decoration:none;
        }
        .yshortcuts a{
            border-bottom:none !important;
        }
        a[x-apple-data-detectors]{
            color:inherit !important;
        }
        .mcnPreviewText{
            display:none !important;
        }


    /*Buttons & other sections*/
    .button{
        display:inline-block;
      letter-spacing:2px;
      padding: 10px 10px;
      text-decoration:none;
      background: #6b6b6b; 
      background-color: #6b6b6b; 
      border-radius: 5px; 
        }
    .bullet{
        background: #6b6b6b; 
        background-color: #6b6b6b; 
        border-radius: 5px;
        text-align: center;
        padding: 3px 0px 3px 0px;
        margin: 0 auto !important;
        display: block;
        width: 100%;
        }

        
    /*obile Responsives Styles*/
    @media only screen and (max-width:480px){
    .mj-full-width-mobile{
            width:100% !important;
        }

    .centermobile{
      margin: 0 auto !important;
    }

        .blockwrap { 
            display: block !important;
        }

        .hide{
            display: none !important;
        }

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

        .textleft{
            text-align: left !important;
        }

        .textright{
            text-align: right !important;
        }

        .paddingtotal{
            padding: 0px 0px 0px 0px !important;
        }

        .paddingsi{
            padding: 20px 0px 20px 0px !important;
        }

        .paddingid{
            padding: 0px 20px 0px 20px !important;
        }

        .textminium{
            font-size: 14px !important;
        }

        .headerminium{
            font-size: 20px !important;
        }


}   

/*Right & Left Column Responsives Styles*/
  @media screen and (max-width: 600px){
    .stack-column,.stack-column-center{
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      direction:ltr !important;
    }

} @media screen and (max-width: 600px){
    .stack-column-center{
      text-align:center !important;
    }

}

@media screen and (max-width: 600px){
        .fluid,.fluid-centered{
            max-width:100% !important;
            height:auto !important;
            margin-left:auto !important;
            margin-right:auto !important;
        }
}


/*Container Styles*/        
    .wrapper{
    max-width:600px;
    margin: 0 auto !important;
}
    .clear{
    width:inherit;
    clear:both;
}
</style>
</head>


<!--Start body of the email -->
<body style="background-color:#E0E0E0;background: #E0E0E0;margin: 0;" width="100%" bgcolor="#E0E0E0" >




    <!--Start wrapper -->
    <!--[if mso | IE]>
    <table border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px !important;" width="600">
        <tr>
          <td style="mso-line-height-rule:exactly;max-width:600px !important;" class="wrapper" align="center" width="600">
            <![endif]-->
        <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="background:#FFFFFF;background-color:#FFFFFF;max-width: 600px !important ;" bgcolor="#FFFFFF" width="600">
          <tbody>
            <tr>
             <td id="content" class="wrapper" align="center" width="600" style="direction:ltr;padding:0;max-width: 600px !important;border-collapse:collapse"><!-- Start Main Colum -->





                <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color:#c2c2c2; background:#c2c2c2;" width="100%" bgcolor="#c2c2c2">
                  <tr>
                    <td width="100%" style="mso-line-height-rule:exactly;mso-padding-alt: 0px 0px;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" width="100%" class="mj-full-width-mobile mj-outlook-group-fix wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2; max-width: 600px;">
                       <tbody>
                        <tr>
                           <td  align="center"  class="wrapper" width="100%" bgcolor="#c2c2c2" style="vertical-align:top;margin: 0 auto;padding: 5px 0px;background-color: #c2c2c2; background: #c2c2c2;max-width: 600px;" mc:edit="header_logo">

                                <table cellspacing="0" cellpadding="0" border="0" class="" bgcolor="#c2c2c2" width="100%" style="max-width: 600px;;background-color:#c2c2c2; background:#c2c2c2;">
                                <tr> <td align="center" width="100%" bgcolor="#c2c2c2" style="max-width: 600px;background-color: #c2c2c2; background: #c2c2c2; ">
                                <center>
                                 <img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/22c4d06c-6363-4d2c-808c-6682d6866711.jpg" alt="" style="max-width: 150px;" />
                               </center>
                                </td> </tr>
                                </table>
                            </td>

                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->






                <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
                  <tr>
                    <td width="600" align="center">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
                       <tbody>
                        <tr>
                           <td style="vertical-align:top;"  mc:edit="header_title_text" class="stack-column-center">
                             
                                  <h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-Tittle</h1>

                            </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->





                 <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
                  <tr>
                    <td width="600" align="center">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text_extended" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
                       <tbody>
                        <tr>
                           <td style="vertical-align:top;"  mc:edit="header_title_text_extended" class="stack-column-center">
                             
                                  <h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-SubTittle</h1>

                                   <p class="textcenter" style="text-align: center;padding: 5px 35px 10px 35px;    line-height: 150%;">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. </p>  



                            </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->








                <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
                  <tr>
                    <td width="600" align="center">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#FFFFFF" mc:repeatable="content_block" mc:variant="hero_image"  style="direction:ltr;display:inline-block;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF; margin: 10px 0px 10px 0px  !important; ">
                       <tbody>
                        <tr>
                           <td style="vertical-align:top;" mc:edit="hero_image">
                            <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="padding: 0px 10px 0px 10px;">
                                <tr>
                                  <td>
                               <center>
                                  <img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;">
                                  <br />
                               </center>
                             </td>
                           </tr>
                         </table>
                            </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->












                 <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" width="100%" bgcolor="#c2c2c2">
                  <tr>
                    <td width="100%" style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#c2c2c2" id="footer" class="mj-full-width-mobile mj-outlook-group-fix wrapper stack-column-center" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2;font-size: 10px !important;" >
                       <tbody>
                        <tr>
                            <td align="center" class="wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;max-width:600px; background-color: #c2c2c2; background: #c2c2c2;"  width="100%">


                                <table cellspacing="0" cellpadding="0" border="0" class="" width="100%" style="max-width: 600px;">
                                <tr> 


                             <td id="businessinfo" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top; text-align: left;padding: 20px 20px 20px 20px;margin: 0 auto !important;" mc:edit="footer_section">
                                  <span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
                                  <br />
                            </td>


                           <td id="legal" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top;text-align: right;padding: 20px 20px 20px 20px;margin: 0 auto !important;">
                                  <a href="#" target="Blank" style="font-weight: 400;">Unsuscribe</a>
                                  <br />
                                  <a href="#" target="Blank" style="font-weight: 400;">Update Profile</a>
                                  <br />
                            </td>

                                </tr>
                                </table>

                           </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->






                

                </td><!-- Final Main Colum - End wrapper -->
            </tr>
           </tbody>
        </table>
            <!--[if mso | IE]>
    </td>
    </tr>
    </table>
    <![endif]-->



</body><!--Final cuerpo del email - End body of the email -->
</html>

Answer 1

欢迎来到充满电邮编码的世界 ;)

我运行对你的模板进行了一些测试，发现中间部分的大图像把事情搞砸了。

Outlook dosnt 始终只使用 style="max-width:600px;"，您需要 <img> 标签上的宽度。
您的模板是 600px，您的图片设置为 600px，但每边还有 20px 的边距。

这应该可以解决您的问题

 <center>
   <img width="560" src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 560px;">
 </center>

之前：

之后：

Answer 2

这很可能是因为您的英雄形象。

如果您没有在 <img> 标签中设置宽度属性，Outlook 桌面应用程序往往会以其原始宽度显示图像。仅设置最大宽度是不够的。

页眉左右两边多了 space，因为主图多了 space。它显示为 650 像素宽度，即使最大宽度设置为 600 像素。只需将 width 属性添加到 <img> 标记（最好在末尾），它应该可以解决问题。因此，您的主图 <img> 标签应如下所示，

<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;" width="600" />

注意我在最后添加的宽度属性。

这可能会产生一些响应问题。要解决响应问题，请将其添加到头部样式标签（如果还没有）。

@media screen and (max-width: 600px) {
    img {width: 100% !important;}
}

您的所有图片都内联设置了最大宽度，因此将宽度设置为 100% 不会使它们在移动屏幕上爆炸。

希望对您有所帮助。

Outlook 2019 上的额外 Space。右侧和左侧

Extra Space on Outlook 2019. Right and Left Side

html

email

outlook

html-email

outlook-2019