我正在测试我的电子邮件简报，除了windows outlook之外，一切似乎都非常稳定。它适用于osx outlook而不是任何版本的windows。基本上，前景似乎忽略了主要的容器，一切都散开了。它也打破了风格，尤其是文字和小时风格。
https://codepen.io/joefus1o4/pen/RyyyLL?editors=1000
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="background:#f3f3f3!important">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
@media only screen {
html {
min-height: 100%;
background: #cacaca!important
}
}
@media only screen and (max-width:596px) {
.small-float-center {
margin: 0 auto!important;
float: none!important;
text-align: center!important
}
.small-text-center {
text-align: center!important
}
.small-text-left {
text-align: left!important
}
.small-text-right {
text-align: right!important
}
}
@media only screen and (max-width:596px) {
table.body img {
width: auto;
height: auto
}
table.body center {
min-width: 0!important
}
table.body .container {
width: 95%!important
}
table.body .columns {
height: auto!important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 16px!important;
padding-right: 16px!important
}
table.body .columns .columns {
padding-left: 0!important;
padding-right: 0!important
}
table.body .collapse .columns {
padding-left: 0!important;
padding-right: 0!important
}
th.small-4 {
display: inline-block!important;
width: 33.33333%!important
}
th.small-6 {
display: inline-block!important;
width: 50%!important
}
th.small-12 {
display: inline-block!important;
width: 100%!important
}
.columns th.small-12 {
display: block!important;
width: 100%!important
}
table.menu {
width: 100%!important
}
table.menu td,
table.menu th {
width: auto!important;
display: inline-block!important
}
table.menu.vertical td,
table.menu.vertical th {
display: block!important
}
table.menu[align=center] {
width: auto!important
}
}
@media only screen and (max-width:596px) {
.header .title {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header h2.text-right {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.month.small-6.large-6.columns.first {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.year.small-6.large-6.columns.last {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.small-6.large-4.columns.first {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.small-6.large-4.columns {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.small-6.large-4.columns.last {
padding: 0!important;
width: 100%!important
}
}
@media only screen and (max-width:596px) {
.header hr {
width: 100%!important
}
}
@media only screen and (max-width:596px) {
.header .hr_3 {
width: 100%!important
}
}
@media only screen and (max-width:596px) {
.header p.text-left {
margin-bottom: 0!important;
padding-top: 4px!important;
padding-bottom: 2px!important;
padding-right: 8px!important
}
}
@media only screen and (max-width:596px) {
.header p.text-center {
margin-bottom: 0!important;
padding-top: 4px!important;
padding-bottom: 2px!important;
padding-left: 8px!important
}
}
@media only screen and (max-width:596px) {
.header p.text-right {
border: 0!important;
margin-top: 0!important
}
}
@media only screen and (max-width:596px) {
.feature h2 {
padding: 0!important
}
}
@media only screen and (max-width:566px) {
.feature h2 {
font-size: 18px!important
}
}
@media only screen and (max-width:448px) {
.feature h2 {
font-size: 15.5px!important
}
}
@media only screen and (max-width:596px) {
.feature p {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.feature hr {
width: 93%!important
}
}
@media only screen and (max-width:596px) {
.body-articles hr {
width: 93%!important
}
}
@media only screen and (max-width:596px) {
.body-articles .wrapper-inner {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.video h2 {
padding-left: 0!important
}
}
@media only screen and (max-width:419px) {
.video h2 {
font-size: 22px!important
}
}
@media only screen and (max-width:596px) {
.video hr {
width: 93%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .OR_ad {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.ad-social h2 {
padding: 0!important;
font-size: 18px!important
}
}
@media only screen and (max-width:596px) {
.ad-social p {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.ad-social .facebook {
margin: 0!important;
margin-bottom: 10px!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .instagram {
margin: 0!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .linkedin {
margin: 0!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .twitter {
margin: 0!important;
margin-bottom: 10px!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .youtube {
margin: 0!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social hr {
width: 93%!important
}
}
@media only screen and (max-width:495px) {
.footer a {
font-size: 13px!important
}
}
</style>
</head>
<body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;background:#f3f3f3!important;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"><span class="preheader" style="color:#cacaca!important;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden"></span>
<table class="body" style="Margin:0;background:#f3f3f3!important;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;height:100%;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<center data-parsed="" style="min-width:580px;width:100%">
<table align="center" class="container float-center" style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="wrapper header" align="center" style="background:#8a8a8a;background-color:#fefefe;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="wrapper-inner" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:20px;padding-top:40px;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<hr class="hr_1" width="515" size="5" noshade="" style="background-color:#fefefe;border:0;border-top:5px solid;margin:0 auto">
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:16px;text-align:left;width:564px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<center data-parsed="" style="min-width:532px;width:100%">
<a class="OR_logo float-center" target="_blank" href="https://www.outdoorretailer.com/" align="center" style="Margin:0;color:#2199e8;font-family:Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none"><img width="205" height="61" src="https://s15.a2zinc.net/Clients/EmeraldExpo/GlobalAdmin/CUSTOM/5_18_OR_Logo.jpg" alt="outdoor retailer logo" style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:inline;max-width:100%;outline:0;padding-top:34px;text-decoration:none;width:auto"></a>
</center>
</th>
<th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="month small-6 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:8px;text-align:left;width:274px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<h2 class="title" style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-left:6px;text-align:left;word-wrap:normal">MAY</h2></th>
</tr>
</table>
</th>
<th class="year small-6 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:16px;text-align:left;width:274px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<h2 class="text-right" style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-right:6px;text-align:right;word-wrap:normal">2018</h2></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<hr class="hr_2" width="515" size="5" noshade="" style="background-color:#fefefe;border:0;border-top:5px solid;margin:0 auto">
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="small-6 large-4 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:8px;text-align:left;width:177.33px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<p class="text-left small-text-right" style="Margin:0;Margin-bottom:10px;border-right:1px solid;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;margin-bottom:8px;margin-top:6px;padding:0;padding-bottom:4px;padding-left:8px;padding-top:6px;text-align:left">Summer Market</p>
</th>
</tr>
</table>
</th>
<th class="small-6 large-4 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:8px;text-align:left;width:177.33px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<p class="text-center small-text-left" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;margin-bottom:8px;margin-top:6px;padding:0;padding-bottom:4px;padding-top:6px;text-align:center">July 23-26, 2018</p>
</th>
</tr>
</table>
</th>
<th class="small-6 large-4 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:16px;text-align:left;width:177.33px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
答案 0 :(得分：0)
我通过Litmus运行你的html代码，每个版本的Outlook Windows（2007年，2010年，2011年，2013年，2016年，outlook.com，Outlook 365，Windows 10邮件）看起来都很好。他们的Outlook版本可能与您用来测试的版本不同。
我的建议是将width="580"添加到第308行（即容器）周围的表中。 Outlook会尊重这样的命令，但有时会忽略内联样式表中的width:580px;。表中的宽度不应该弄乱您的@media查询。
<table width="580" align="center" class="container float-center"
style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;
float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px">