Question

此布局仅在Outlook中打破。我不记得我从哪里得到了模板，所以我不能给予应有的信用，但我相信这是Lee Munroe的模板之一。我无法弄清楚为什么它在Outlook 2013中突破，这是一个简单的单列布局。我有一个更复杂的单列布局，我使用相同的框架，这一个给我带来任何麻烦。但是当我尝试将其解析为更简单的布局时，我无法让它与Outlook很好地协作。有任何想法吗？自学成才的编码器，所以我可能会遗漏一些简单的东西。我知道Outlook无法处理最大宽度，但这个模板应该是Outlook准备好了。

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>A Message from the CEO</title>
  <style type="text/css">

img {
  border: none;
  -ms-interpolation-mode: bicubic;
  max-width: 100%; }

.img-block {
  display: block; }

body {
  font-family: open sans, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

table {
  border-collapse: separate;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  width: 100%; }
  table td {
    font-family: open sans, sans-serif;
    font-size: 14px;
    vertical-align: top; }

body {
  background-color: #F6F6F6;
  Margin: 0;
  padding: 0; }

.body {
  background-color: #F6F6F6;
  width: 100%; }

.container {
  Margin: 0 auto !important;
  max-width: 600px;
  padding: 30px;
  width: auto !important;
  width: 600px; }

.content {
  box-sizing: border-box;
  display: block;
  Margin: 0 auto;
  max-width: 600px;
  padding: 0px; }

.main {
  background: #FFFFFF;
  border-radius: 3px;
  width: 100%; }

.wrapper {
  box-sizing: border-box;
  padding: 30px; }

.header {
  background-color: #FFFFFF;
  Margin-bottom: 0px;
  Margin-top: 0px;
  padding: 0px 0px 0px 0px;
  width: 100%; }
  .header > table {
    min-width: 100%; }

h1,
h2,
h3,
h4 {
  Margin: 0; }

h1 {
  font-family: open sans, sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  color: #7D1745;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 10px; }

h2 {
  font-family: open sans, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #3C708F;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

h3 {
  font-family: open sans, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #7D1745;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

h4 {
  font-family: open sans, sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #454646;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

ul,
ol {
  font-family: open sans, sans-serif;
  font-size: 1em;
  font-weight: normal;
  color: #454646;
  Margin: 0;
  Margin-bottom: 20px; }
  p li,
  ul li,
  ol li {
    list-style-position: outside;
    Margin-left: 15px;
    padding: 0;
    text-indent: 0; }
ul,
ol {
  Margin-left: 5px;
  padding: 0;
  text-indent: 0; }

a:link {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:hover {
  font-family: open sans, sans-serif;
  color: #56A2CC;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:active {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:visited {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

.preheader {
  color: transparent;
  display: none;
  height: 0;
  max-height: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  mso-hide: all;
  visibility: hidden;
  width: 0; }

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 24px !important;
    Margin-bottom: 10px !important; }
  h2 {
    font-size: 21px !important;
    Margin-bottom: 10px !important; }
  h3 {
    font-size: 21px !important;
    Margin-bottom: 10px !important; }
  h4 {
    font-size: 18px !important;
    Margin-bottom: 10px !important; }
  p,
  ul,
  ol,
  td,
  span,
  a {
    font-size: 16px !important; }
  .wrapper {
    padding: 10px !important; }
  .content {
    padding: 0 !important; }
  .container {
    padding: 0 !important;
    width: 100% !important; }
  .header {
    Margin-bottom: 10px !important; }
  .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important; }
  .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important; } }

@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; } }
    </style>

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

</head>
<body class="">
  <table border="0" cellpadding="0" cellspacing="0" class="body">
    <tr>
      <td class="container">
        <div class="content">
        <!-- START CENTERED WHITE CONTAINER -->
        <span class="preheader">Read the latest update from Johnson Financial Group.</span>
        <table class="main" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
          </tr>
          <tr>
            <td class="wrapper">
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
                    <h1>Headline</h1>
                    <p>Content here. Blah blah blah blah.</p>
                    <h2>Subheadline 1</h2>
                    <p>Content here. Blah blah blah blah.</p>
                    <h3>Subheadline 2</h3>
                    <p>Content here. Blah blah blah blah. <a href="https://www.johnsonbank.com/" title="Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank"><strong style="font-weight: 700;">Read More</strong></a></p>
                    <h4>Subheadline 3</h4>
                    <p>Content here. Blah blah blah blah.</p>
                    <p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="wrapper">
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center">
                    <img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
                    <div>&nbsp;</div>
                    <a href="https://www.johnsonbank.com/Personal/Banking" title="Personal Banking | Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">BANKING</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.johnsonbank.com/Personal/Wealth" title="Personal Wealth | Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">WEALTH</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.johnsonbank.com/Personal/Insurance" title="Personal Insurance | Johnson Insurance" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">INSURANCE</strong></a><br />
                    <div>&nbsp;</div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- END CENTERED WHITE CONTAINER -->
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Answer 1

您的问题远远超出了Outlook 2013.这些问题发生在Outlook 2007-2016，Windows 10 Mail和Android设备中。

问题出在<style>表单中。如果你注释掉你的样式表，那么在Litmus中测试时一切正常。

<style>将桌面<table>宽度设置为width: 100%;。但是你不希望你的表格达到100％，你想要的是600px。

table {
  border-collapse: separate;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  /*width: 100%; <-- don't use this */
  width: 600px;
}

浏览您的<style>表单，将width:100%;值更改为width: 600px;。这包括@media all，但您可以跳过@media only screen and (max-width: 600px)，因为这些表值应为100％宽度。

您需要找到一种方法，使控制表的宽度为100％，并将容器表的中心放在父表中。

其他问题

您的预览文字无法在Android中使用。它出现了，我想你想隐藏它。

Open Sans永远不会在Outlook或Gmail中运行，因为它们都不适用于Web字体。您可以将它用于Apple，IOS，Android，AOL和其他客户端。我强烈建议您使用这样的样式表链接：

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

将其添加到您的<head>。

在Google字体推荐的Open Sans样式表中使用此代码：

font-family: 'Open Sans', Arial, sans-serif;

您应该设置默认的后备字体，当前设置为sans-serif以确保使用正确的字体。我建议添加一个网络安全字体作为一致性的后备，因为Outlook有一个坏习惯，即恢复Times New Roman并且你不想要一个serif字体。

祝你好运。

编辑：我编辑了这个答案，因为我没有说清楚您可以跳过编辑此媒体查询的值：@media only screen and (max-width: 600px)。

响应式电子邮件模板 - Outlook 2013打破布局

1 个答案: