我有一封要发送的电子邮件,我最初是在 mailchimp 中设计的,然后从那里提取代码以进一步定制它。我有一个两列标题,其中徽标位于左侧,社交图标位于右侧。我在 emailonacid 上对其进行了测试,所有测试看起来都很棒,除了在 Outlook 2007、2010、2013 上,LOGO 不再与社交图标底部对齐。在 Outlook 2011 和所有其他电子邮件客户端(如 Yahoo、Gmail 等)上,它看起来不错。为什么它在 2011 年看起来不错,但在其他版本的 Outlook 中却没有,是否有特定原因?有没有具体的解决办法?
我已经包含了标题应该是什么样子与某些 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%"> </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> <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>
截图如下。