Question

我正在构建一个非常简单的HTML电子邮件模板，所有这些都很棒，直到你进入Outlook ... Outlook似乎忽略了关于表格最大宽度的所有样式，所以它跨越了整个宽度电子邮件窗口。

我尝试了一些事情，例如将表格包裹在具有最大宽度的div中，但它只是被忽略了。

代码如下，任何人都可以发现造成问题的原因：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oppss, Hello</title>
<style>
/* -------------------------------------
    GLOBAL
------------------------------------- */

* {
  font-family: Calibri, 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.6em;
  margin: 0;
  padding: 0;
}

img {
  max-width: 600px;
  width: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  height: 100%;
  -webkit-text-size-adjust: none;
  width: 100% !important;
}


/* -------------------------------------
    ELEMENTS
------------------------------------- */
a {
  color: #348eda;
}

.btn-primary {
  margin-bottom: 10px;
  width: auto !important;
}

.btn-primary td {
  background-color: #348eda; 
  border-radius: 25px;
  font-family: Calibri, 'Open Sans',  "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-size: 14px; 
  text-align: center;
  vertical-align: top; 
}

.btn-primary td a {
  background-color: #348eda;
  border: solid 1px #348eda;
  border-radius: 25px;
  border-width: 10px 20px;
  display: inline-block;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
  line-height: 2;
  text-decoration: none;
}

.last {
  margin-bottom: 0;
}

.first {
  margin-top: 0;
}

.padding {
  padding: 10px 0;
}


/* -------------------------------------
    BODY
------------------------------------- */
table.body-wrap {
  padding: 20px;
  width: 100%;
}

table.body-wrap .container {
  border: 1px solid #f0f0f0;
}


/* -------------------------------------
    FOOTER
------------------------------------- */
table.footer-wrap {
  clear: both !important;
  width: 100%;  
}

.footer-wrap .container p {
  color: #666666;
  font-size: 12px;

}

table.footer-wrap a {
  color: #999999;
}


/* -------------------------------------
    TYPOGRAPHY
------------------------------------- */
h1, 
h2, 
h3 {
  color: #e6007e;
  font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 200;
  line-height: 1.2em;
  margin: 10px 0 10px;
}

h1 {
  font-size: 74px;
  padding: 0px 20px 0px 20px;
  letter-spacing: -5px;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 22px;
}
h3 {
  font-size: 22px;
  font-style: italic;
}
h4 {
  font-size: 15px;
  line-height: 21px;
  font-style: italic;
  margin: 0 0 20px 0;
  color: #53565a;
  padding: 0 20px 0 40px;
  font-weight: 600;
  font-family: Georgia, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

p, 
ul, 
ol {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 10px;
  color: #53565a;
  padding: 0 20px 0 40px;
  font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

ul li, 
ol li {
  margin-left: 5px;
  list-style-position: inside;
}

/* ---------------------------------------------------
    RESPONSIVENESS
------------------------------------------------------ */

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
  clear: both !important;
  display: block !important;
  Margin: 0 auto !important;
  max-width: 600px !important;
}

.rounded-wrapper {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
  background-color: #fff;
}

/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
    -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
  background-color: #fff;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
  display: block;
  margin: 0 auto;
  max-width: 600px;
}

/* Let's make sure tables in the content area are 100% wide */
.content table {
  width: 100%;
}

</style>
</head>

<body bgcolor="#f6f6f6">

  <div style="width: 600px !important; margin: 0 auto;">
  <!-- body -->
  <table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
    <tr>
      <td></td>
      <td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
        <div class="rounded-wrapper">
          <!-- content -->
          <div class="content">
            <img src="header.jpg" editable="true" width="560">
          <table>
            <tr>
              <td>
                <h1><img src="hello.jpg" style="width: 204px;"></h1>

                <h4>Lorem</h4>

                <p>Lorem</p>

                <p>Lorem</p>

                <p>Lorem</p>

                <p style="padding: 10px 20px 0 20px !important"><a href="#" target="_blank" editable="true"><img src="apply-now.jpg" style="width: 121px;"></a></p>
              </td>
            </tr>
          </table>
          </div>
          <!-- /content -->
        </div>

      </td>
      <td></td>
    </tr>
  </table>
  <!-- /body -->
  <!-- footer -->
  <table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
    <tr>
      <td></td>
      <td class="container">

        <!-- content -->
        <div class="content">
          <table>
            <tr>
              <td align="center">
                <p><unsubscribe>Unsubscribe</unsubscribe>.
                </p>
              </td>
            </tr>
          </table>
        </div>
        <!-- /content -->

      </td>
      <td></td>
    </tr>
  </table>
  <!-- /footer -->

</div>

</body>
</html>

Answer 1

Outlook忽略最大宽度，您应该使用if microsoft outlook标签（mso）包装电子邮件<table>。

＆＃13;

<!--[if mso]>
<center><table><tr><td width="600">
<![endif]-->
<!-- MAIN EMAIL BODY -->

<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
  <tr>
    <td></td>
    <td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
      <div class="rounded-wrapper">
        <!-- content -->
        <div class="content">
          <img src="header.jpg" editable="true" width="560">
          <table>
            <tr>
              <td>
                <h1><img src="hello.jpg" style="width: 204px;"></h1>

                <h4>Lorem</h4>

                <p>Lorem</p>

                <p>Lorem</p>

                <p>Lorem</p>

                <p style="padding: 10px 20px 0 20px !important">
                  <a href="#" target="_blank" editable="true">
                    <img src="apply-now.jpg" style="width: 121px;">
                  </a>
                </p>
              </td>
            </tr>
          </table>
        </div>
        <!-- /content -->
      </div>

    </td>
    <td></td>
  </tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
  <tr>
    <td></td>
    <td class="container">

      <!-- content -->
      <div class="content">
        <table>
          <tr>
            <td align="center">
              <p>
                <unsubscribe>Unsubscribe</unsubscribe>.
              </p>
            </td>
          </tr>
        </table>
      </div>
      <!-- /content -->

    </td>
    <td></td>
  </tr>
</table>

<!-- END / MAIN EMAIL BODY -->
<!--[if mso]>
</td></tr></table></center>
<![endif]-->

＆＃13;

Answer 2

我在这里遇到了同样的问题但是当我编写CSS inline时它已经解决了。

尝试将所有CSS内联编写。

电子邮件模板，除Outlook外的所有客户端都可以

2 个答案: