HTML Outlook 电子邮件中的间距问题

Question

我有一封要发送的电子邮件，我最初是在 mailchimp 中设计的，然后从那里提取代码以进一步自定义它。我有两列 header，其中徽标在左侧，社交图标在右侧。我在 emailonacid 上对其进行了测试，所有测试看起来都很棒，除了在 Outlook 2007、2010、2013 上，徽标不再与社交图标底部对齐。在 Outlook 2011 和所有其他电子邮件客户端（如 Yahoo、Gmail 等）上，它看起来不错。是否有特定原因导致它在 2011 年看起来不错，但其他版本的 Outlook 却不行？有具体的修复方法吗？

我已经包含了 header 应该是什么样子以及它在某些 Outlook 客户端中是什么样子的屏幕截图。我还在此处附上了代码。

<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/" >
<head>
<meta property="og:title" content="Subject of Email Goes Here">
<meta property="fb:page_id" content="43929265776">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><!-- NAME: 1 COLUMN -->
<!--[if gte mso 15]>
                <xml>
                        <o:OfficeDocumentSettings>
                        <o:AllowPNG/>
                        <o:PixelsPerInch>96</o:PixelsPerInch>
                        </o:OfficeDocumentSettings>
                </xml>
                <![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subject of Email Goes Here</title>

<style type="text/css">
                p{
                        margin:10px 0;
                        padding:0;
                }
                table{
                        border-collapse:collapse;
                }
                h1,h2,h3,h4,h5,h6{
                        display:block;
                        margin:0;
                        padding:0;
                }
                img,a img{
                        border:0;
                        height:auto;
                        outline:none;
                        text-decoration:none;
                }
                body,#bodyTable,#bodyCell{
                        height:100%;
                        margin:0;
                        padding:0;
                        width:100%;
                }
                #outlook a{
                        padding:0;
                }
                img{
                        -ms-interpolation-mode:bicubic;
                }
                table{
                        mso-table-lspace:0pt;
                        mso-table-rspace:0pt;
                }
                .ReadMsgBody{
                        width:100%;
                }
                .ExternalClass{
                        width:100%;
                }
                p,a,li,td{
                        mso-line-height-rule:exactly;
                }
                a[href^=tel],a[href^=sms]{
                        color:inherit;
                        cursor:default;
                        text-decoration:none;
                }
                p,a,li,td,body,table{
                        -ms-text-size-adjust:100%;
                        -webkit-text-size-adjust:100%;
                }
                .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
                        line-height:100%;
                }
                a[x-apple-data-detectors]{
                        color:inherit !important;
                        text-decoration:none !important;
                        font-size:inherit !important;
                        font-family:inherit !important;
                        font-weight:inherit !important;
                        line-height:inherit !important;
                }
                #bodyCell{
                        padding:10px;
                }
                .templateContainer{
                        max-width:600px !important;
                }
                a.mcnButton{
                        display:block;
                }
                .mcnImage{
                        vertical-align:bottom;
                }
                .mcnTextContent{
                        word-break:break-word;
                }
                .mcnTextContent img{
                        height:auto !important;
                }
                .mcnDividerBlock{
                        table-layout:fixed !important;
                }
                body,#bodyTable{
                        background-color:#e6e6e6;
                }
                #bodyCell{
                        border-top:0;
                }
                .templateContainer{
                        border:0;
                }
                h1{
                        color:#002664;
                        font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
                        font-size:18px;
                        font-style:normal;
                        font-weight:bold;
                        line-height:150%;
                        letter-spacing:normal;
                        text-align:left;
                }

                #templatePreheader{
                        background-color:#FAFAFA;
                        border-top:0;
                        border-bottom:0;
                        padding-top:0px;
                        padding-bottom:0px;
                }
                #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
                        color:#656565;
                        font-family:Helvetica;
                        font-size:10px;
                        line-height:150%;
                        text-align:left;
                }
                #templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
                        color:#E6E6E6;
                        font-weight:normal;
                        text-decoration:underline;
                }
                #templateHeader{
                        background-color:#FFFFFF;
                        border-top:0;
                        border-bottom:0;
                        padding-top:9px;
                        padding-bottom:0;
                }
                #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
                        color:#202020;
                        font-family:Helvetica;
                        font-size:16px;
                        line-height:150%;
                        text-align:left;
                }
                #templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
                        color:#2BAADF;
                        font-weight:normal;
                        text-decoration:underline;
                }
                #templateBody{
                        background-color:#FFFFFF;
                        border-top:0;
                        border-bottom:2px solid #EAEAEA;
                        padding-top:0;
                        padding-bottom:9px;
                }
                #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
                        color:#202020;
                        font-family:Helvetica;
                        font-size:14px;
                        line-height:150%;
                        text-align:left;
                }
                #templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
                        color:#0060a9;
                        font-weight:bold;
                        text-decoration:none;
                }
                #templateFooter{
                        background-color:#FAFAFA;
                        border-top:0;
                        border-bottom:0;
                        padding-top:9px;
                        padding-bottom:9px;
                }
                #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
                        color:#656565;
                        font-family:Helvetica;
                        font-size:12px;
                        line-height:150%;
                        text-align:center;
                }
                #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
                        color:#656565;
                        font-weight:normal;
                        text-decoration:underline;
                }
        @media only screen and (min-width:768px){
                .templateContainer{
                        width:600px !important;
                }

}       @media only screen and (max-width: 480px){
                body,table,td,p,a,li{
                        -webkit-text-size-adjust:none !important;
                }

}       @media only screen and (max-width: 480px){
                body{
                        width:100% !important;
                        min-width:100% !important;
                }

}       @media only screen and (max-width: 480px){
                #bodyCell{
                        padding-top:10px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImage{
                        width:100% !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnCaptionTopContent,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer{
                        max-width:100% !important;
                        width:100% !important;
                }

}       @media only screen and (max-width: 480px){
        .textContentContainerLeft{
                max-width: 65% !important;
                width: 65% !important;
        }
}       @media only screen and (max-width: 480px) {
        .textContentContainerRight{
                max-width: 35% !important;
                width: 35% !important;
        }
}       @media only screen and (max-width: 480px) {
        .socialIcon {
                height: 18px !important;
                width: 18px !important;
        }
}       @media only screen and (max-width: 480px) {
        #templatePreheader .mcnTextContent .fillerTable p{
                line-height: 0 !important;
        }

  }     @media only screen and (max-width: 480px){
                .mcnBoxedTextContentContainer{
                        min-width:100% !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImageGroupContent{
                        padding:9px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
                        padding-top:9px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImageCardTopImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
                        padding-top:18px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImageCardBottomImageContent{
                        padding-bottom:9px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImageGroupBlockInner{
                        padding-top:0 !important;
                        padding-bottom:0 !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImageGroupBlockOuter{
                        padding-top:9px !important;
                        padding-bottom:9px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnTextContent,.mcnBoxedTextContentColumn{
                        padding-right:18px !important;
                        padding-left:18px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
                        padding-right:18px !important;
                        padding-bottom:0 !important;
                        padding-left:18px !important;
                }

}       @media only screen and (max-width: 480px){
                .mcpreview-image-uploader{
                        display:none !important;
                        width:100% !important;
                }

}       @media only screen and (max-width: 480px){
                h1{
                        font-size:22px !important;
                        line-height:125% !important;
                }

}      @media only screen and (max-width: 480px){
                .mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
                        font-size:14px !important;
                        line-height:150% !important;
                }

}       @media only screen and (max-width: 480px){
                #templatePreheader{
                        display:block !important;
                }

}       @media only screen and (max-width: 480px){
                #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
                        font-size:14px !important;
                        line-height:150% !important;
                }

}       @media only screen and (max-width: 480px){
                #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
                        font-size:16px !important;
                        line-height:150% !important;
                }

}       @media only screen and (max-width: 480px){
                #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
                        font-size:16px !important;
                        line-height:150% !important;
                }

}       @media only screen and (max-width: 480px){
                #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
                        font-size:14px !important;
                        line-height:150% !important;
                }

}
</style>
</head>
<body style="height:100%; margin:0; padding:0; width:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; background-color:#e6e6e6; " ><div ><div class="mktEditable" ><center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width:
100%;background-color: #e6e6e6;">
<tr>
<td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 10px;width: 100%;border-top: 0;"><!-- BEGIN TEMPLATE // -->
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
                                                <![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;">
<tr>
<td align="center" valign="top" id="templatePreheader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #e6e6e6;border-top: 0;border-bottom: 0;padding-top: 1px;padding-bottom: 0px;"><!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
        <![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;max-width: 600px !important;">
<tbody><tr>
<td valign="bottom" class="preheaderContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="bottom" class="mcnTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;" valign="bottom">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="65%" class="mcnTextContentContainer textContentContainerLeft" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody>
<tr>
<td valign="bottom" class="mcnTextContent" style="padding: 0px 0px 0px 0px;color: #1e3b8b;font-size: 1px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;line-height: 100%;text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" height="10" width="100%" class="mcnTextBlock fillerTable" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="bottom" class="mcnTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;" valign="bottom">  <p style="font-size: 2px;line-height: 50%">&nbsp;&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<span style="display:none; color: #1e3b8b; font-family: Arial, Helvetica, sans-serif; font-size: 0px; line-height: 0px; text-decoration: none; max-height:0px ;max-width: 0px; opacity: 0; overflow: hidden;"><!-- PREVIEW TEXT -->Email Previw Text Here</span></td>
</tr>
<tr>
<td height="90" valign="bottom" class="mcnTextContent" style="padding-bottom: 5px;padding-left: 18px;color: #FFFFFF;font-size: 11px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;line-height: 100%;text-align: left;vertical-align: bottom;" valign="bottom"><br><a target="_blank" href="http://placehold.it"><img alt="LOGO HERE" src="http://placehold.it/200x75?text=LOGO" style="max-width: 200px;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage" width="200" align="absbottom"></a></td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="35%" height="50" class="mcnTextContentContainer textContentContainerRight" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody>
<tr>
<td valign="bottom" class="mcnTextContent" style="padding-right: 18px;color: #FFFFFF;font-size: 11px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;line-height: 150%;text-align: right;">
<br>
<a href="{{system.viewAsWebpageLink}}" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;">View this email in your browser</a><br><br>
<div style="color: #E6E6E6; text-align: right;"><a href="http://www.facebook.com" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #e6e6e6;font-weight: normal;text-decoration: underline;"><img src="https://gallery.mailchimp.com/b7054fb8f7e8331b3b8deed4a/images/2d3db039-eb85-4a61-8fd9-3a8bd68abba3.png" alt="Facebook" style="width: 17px;height: 17px;margin: 0px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" align="none" height="17" width="17"></a>&nbsp;<a href="https://twitter.com" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #e6e6e6;font-weight: normal;text-decoration: underline;"><img src="https://gallery.mailchimp.com/b7054fb8f7e8331b3b8deed4a/images/2a87b54c-f615-43a3-bc82-34508a88a4a0.png" alt="Twitter" style="width: 17px;height: 17px;margin: 0px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" align="none" height="17" width="17"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td valign="top" id="templateHeader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;padding-top: 0px;padding-bottom: 0;">
<table class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td style="padding: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner" valign="top">
<table class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" valign="top"><a target="_blank"
href="https://placehold.it"><img alt="" src="http://placehold.it/600x300" style="max-width: 600px;padding-bottom: 0;display: inline
!important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnImage" align="middle" width="600"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 2px solid #EAEAEA;padding-top: 0;padding-bottom: 9px;">
<table class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%;padding: 0px 18px 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table class="mcnDividerContent" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer" align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 9px 25px 9px 25px;font-family: Arial,'helvetica neue',helvetica,sans-serif;font-size: 14px;line-height: 150%;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;text-align: left;"
valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mauris est, iaculis elementum neque fringilla quis. Aliquam id maximus magna, vitae dapibus quam. Nulla ex justo, imperdiet vitae erat eget, maximus auctor mi. Praesent a turpis fringilla, venenatis risus eget, varius turpis. Etiam pellentesque auctor tempus.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%;padding: 0px 18px 10px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table class="mcnDividerContent" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
                                                </td>
</tr>
</table>
                                                <![endif]-->
<!-- // END TEMPLATE --></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>

以下截图。

Normal view, including Outlook 2011

Outlook 2007, 2010, 2013

Answer 1

在移动设备中使用对齐的表格来堆叠内容时，两个表格的宽度总和不能达到 100%，否则 Outlook 将执行您所看到的操作。表格之间需要大约 15 到 20 个空像素。尝试将宽度设置为 63% 和 33%，而不是 65 和 35。

或者，您可以在两个表格之间放置一个幽灵单元格分隔符，例如：  强制 Outlook 将布局视为两个单元格而不是两个浮动表格。

HTML Outlook 电子邮件中的间距问题

Spacing Issue in HTML email with Outlook

email

outlook

html-email

outlook-2011