我目前正在尝试在Outlook中正确设置此电子邮件格式。我觉得我已经在网上到处查看，以便在Outlook中正确格式化。问题是电子邮件的整个主体一直被推到窗口的右侧，但页脚保持居中。理想情况下，电子邮件和页脚会响应并保留在视口的中心，并带有一些灰色填充。我尝试过像这样的条件语句：
<! — [if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif] →
其他一些尝试无济于事。任何意见都将不胜感激！
这是我一直在构建的模板，我觉得这个问题可能存在于页脚中？
<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple Transactional Email</title>
<style type="text/css">/* -------------------------------------
INLINED WITH htmlemail.io/inline
------------------------------------- */
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table td {
border-collapse: collapse;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"></td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;"><!-- START CENTERED WHITE CONTAINER --><span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;"><!-- START MAIN CONTENT AREA -->
<tbody>
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hi,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus. Mutat eloquentiam no duo, ut labore apeirian ocurreret vel. His nobis insolens imperdiet eu, sumo illud nominavi ea vix. Eam an nostro saperet appellantur.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus. Mutat eloquentiam no duo, ut labore apeirian ocurreret vel. His nobis insolens imperdiet eu, sumo illud nominavi ea vix. Eam an nostro saperet appellantur:
<ol>
<li>Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</li>
<li>Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</li>
<li>Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus..</li>
</ol>
</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</p>
<table style="font-family:sans-serif,arialcolor: #000000; font-size:12pt; margin-top:-10px">
<tbody>
<tr>
<td style="padding: 10px 10px 0 0;" valign="top"><img alt="Connie" nosend="1" src="https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" style="width: 100px; height: 100px;" /></td>
<td style="padding-right: 10px;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">
<br />Kate blahblah
<br /> Blah Blah Coordinator
<br /> Blah Blah
<br /> <a href="" rel="EMAIL">Blah@blah.com</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</tbody>
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tbody>
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">blha blah blahblah<br />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
由于
答案 0 :(得分：2)
在第93行摆脱这一行：
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"></td>
您有一个额外的表格单元格，将Outlook 2013-2016推到右侧。
祝你好运。