【发布时间】：2018-03-23 23:16:02
【问题描述】：
我目前正在尝试在 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>谢谢
【问题讨论】：
-
sn-p 看起来不错，我也不能在 JSFiddle 上复制它？电子邮件内容和页脚看起来都居中
-
@CertainPerformance 电子邮件如果在浏览器中检查，99% 的情况下总是看起来不错。发送测试以确认它是否有效。
标签： javascript html css html-email