Outlook 格式问题
Outlook Formatting Issues
我目前正在尝试在 Outlook 中正确设置此电子邮件格式。我觉得我已经在网上到处查看以在 Outlook 中正确设置格式。问题是整个电子邮件正文一直被推到 window 的右侧,但页脚保持居中。理想情况下,电子邮件和页脚会响应并保持在视口的中心并带有一些灰色填充。我试过这样的条件语句:
<! — [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>
谢谢
去掉第 93 行的这一行:
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"></td>
您有一个额外的 table 单元格将 Outlook 2013-2016 推向右侧。
祝你好运。
我目前正在尝试在 Outlook 中正确设置此电子邮件格式。我觉得我已经在网上到处查看以在 Outlook 中正确设置格式。问题是整个电子邮件正文一直被推到 window 的右侧,但页脚保持居中。理想情况下,电子邮件和页脚会响应并保持在视口的中心并带有一些灰色填充。我试过这样的条件语句:
<! — [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>
谢谢
去掉第 93 行的这一行:
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"></td>
您有一个额外的 table 单元格将 Outlook 2013-2016 推向右侧。
祝你好运。