Outlook 中的电子邮件通讯 VML 页脚问题

问题描述

我正在制作电子邮件通讯模板，并且像往常一样，与 Outlook 斗争以使所有内容都能正确呈现。我对 html 和 css 的经验是有限的，但我可以过得去。我的问题是页脚的间距，当我在模板中输入信息时，它会完全改变所有内容。我找不到解决方法。以下是模板中的代码供参考。任何帮助表示赞赏！ （请提前为篇幅道歉！！）

<style type="text/css">@media only screen {
  .col,td,th,div,p {
    font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  }
  .webfont {
    font-family: "Lato",sans-serif;
  }
}

a {
  text-decoration: none;
}

img {
  border: 0;
  line-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}

#outlook a,.links-inherit-color a {
  padding: 0;
  color: inherit;
}

.col {
  font-size: 13px;
  line-height: 22px;
  vertical-align: top;
}

.hover-scale:hover {
  transform: scale(1.2);
}

@media only screen and (max-width: 600px) {
  .video {
    width: 100%;
  }
  img {
    height: auto!important;
  }
  u~div .wrapper {
    min-width: 100vw;
  }
  .container {
    width: 100%!important;
    -webkit-text-size-adjust: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .col {
    Box-sizing: border-Box;
    display: inline-block!important;
    line-height: 20px;
    width: 100%!important;
  }
  .col-sm-1 {
    max-width: 25%;
  }
  .col-sm-2 {
    max-width: 50%;
  }
  .col-sm-3 {
    max-width: 75%;
  }
  .col-sm-third {
    max-width: 33.33333%;
  }
  .col-sm-auto {
    width: auto!important;
  }
  .col-sm-push-1 {
    margin-left: 25%;
  }
  .col-sm-push-2 {
    margin-left: 50%;
  }
  .col-sm-push-3 {
    margin-left: 75%;
  }
  .col-sm-push-third {
    margin-left: 33.33333%;
  }
  .full-width-sm {
    display: table!important;
    width: 100%!important;
  }
  .stack-sm-first {
    display: table-header-group!important;
  }
  .stack-sm-last {
    display: table-footer-group!important;
  }
  .stack-sm-top {
    display: table-caption!important;
    max-width: 100%;
    padding-left: 0!important;
  }
  .toggle-content {
    max-height: 0;
    overflow: auto;
    transition: max-height .4s linear;
    -webkit-transition: max-height .4s linear;
  }
  .toggle-trigger:hover+.toggle-content,.toggle-content:hover {
    max-height: 999px!important;
  }
  .show-sm {
    display: inherit!important;
    font-size: inherit!important;
    line-height: inherit!important;
    max-height: none!important;
  }
  .hide-sm {
    display: none!important;
  }
  .align-sm-center {
    display: table!important;
    float: none;
    margin-left: auto!important;
    margin-right: auto!important;
  }
  .align-sm-left {
    float: left;
  }
  .align-sm-right {
    float: right;
  }
  .text-sm-center {
    text-align: center!important;
  }
  .text-sm-left {
    text-align: left!important;
  }
  .text-sm-right {
    text-align: right!important;
  }
  .nav-sm-vertical .nav-item {
    display: block!important;
  }
  .nav-sm-vertical .nav-item a {
    display: inline-block;
    padding: 5px 0!important;
  }
  .borderless-sm {
    border: none!important;
  }
  .height-sm-auto {
    height: auto!important;
  }
  .line-height-sm-0 {
    line-height: 0!important;
  }
  u~div .wrapper .toggle-trigger {
    display: none!important;
  }
  u~div .wrapper .toggle-content {
    max-height: none;
  }
  u~div .wrapper .nav-item {
    display: inline-block!important;
    padding: 0 10px!important;
  }
  u~div .wrapper .nav-sm-vertical .nav-item {
    display: block!important;
  }
  .p-sm-0 {
    padding: 0!important;
  }
  .p-sm-8 {
    padding: 8px!important;
  }
  .p-sm-16 {
    padding: 16px!important;
  }
  .p-sm-24 {
    padding: 24px!important;
  }
  .pt-sm-0 {
    padding-top: 0!important;
  }
  .pt-sm-8 {
    padding-top: 8px!important;
  }
  .pt-sm-16 {
    padding-top: 16px!important;
  }
  .pt-sm-24 {
    padding-top: 24px!important;
  }
  .pr-sm-0 {
    padding-right: 0!important;
  }
  .pr-sm-8 {
    padding-right: 8px!important;
  }
  .pr-sm-16 {
    padding-right: 16px!important;
  }
  .pr-sm-24 {
    padding-right: 24px!important;
  }
  .pb-sm-0 {
    padding-bottom: 0!important;
  }
  .pb-sm-8 {
    padding-bottom: 8px!important;
  }
  .pb-sm-16 {
    padding-bottom: 16px!important;
  }
  .pb-sm-24 {
    padding-bottom: 24px!important;
  }
  .pl-sm-0 {
    padding-left: 0!important;
  }
  .pl-sm-8 {
    padding-left: 8px!important;
  }
  .pl-sm-16 {
    padding-left: 16px!important;
  }
  .pl-sm-24 {
    padding-left: 24px!important;
  }
  .px-sm-0 {
    padding-right: 0!important;
    padding-left: 0!important;
  }
  .px-sm-8 {
    padding-right: 8px!important;
    padding-left: 8px!important;
  }
  .px-sm-16 {
    padding-right: 16px!important;
    padding-left: 16px!important;
  }
  .px-sm-24 {
    padding-right: 24px!important;
    padding-left: 24px!important;
  }
  .py-sm-0 {
    padding-top: 0!important;
    padding-bottom: 0!important;
  }
  .py-sm-8 {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
  }
  .py-sm-16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important;
  }
  .py-sm-24 {
    padding-top: 24px!important;
    padding-bottom: 24px!important;
  }
}

@media only screen and (max-width: 480px) {
  /*
        @tab Responsive
        @section Large headings Size
       */
  .h1 {
    /*@editable*/
    font-size: 32px !important;
  }
  /*
        @tab Responsive
        @section Medium headings Size
       */
  .h2 {
    /*@editable*/
    font-size: 24px !important;
  }
  /*
        @tab Responsive
        @section Small headings Size
       */
  .h3 {
    /*@editable*/
    font-size: 16px !important;
  }
}


/*
      @tab Preheader
      @section Outer Background Color
    */

.preheader .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Preheader
      @section Inner Background Color
    */

.preheader .inner {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Header
      @section Outer Background Color
    */

.header .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Header
      @section Inner Background Color
    */

.header .inner {
  /*@editable*/
  background-color: #FFFFFF;
}


/*
      @tab HERO
      @section Background Image
    */

.hero .bg-image {
  /*@editable*/
  background-color: #2D1D1A;
  /*@editable*/
  background-image: url('https://dummyimage.com/600x500/2D1D1A/FFFFFF');
  /*@editable*/
  background-repeat: no-repeat;
  /*@editable*/
  background-position: center;
  /*@editable*/
  background-size: cover;
}


/*
      @tab HERO
      @section Outer Background Color
    */

.hero .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab HERO Split
      @section Background Image
    */

.hero-split .bg-image {
  /*@editable*/
  background-color: #2D1D1A;
  /*@editable*/
  background-image: url('https://dummyimage.com/300x540/2D1D1A/FFFFFF');
  /*@editable*/
  background-repeat: no-repeat;
  /*@editable*/
  background-position: center;
  /*@editable*/
  background-size: cover;
}


/*
      @tab HERO Split
      @section Outer Background Color
    */

.hero-split .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab HERO Split
      @section Text Background Color
    */

.hero-split .inner {
  /*@editable*/
  background-color: #FFFFFF;
}


/*
      @tab Products Image Grid
      @section Headline Outer Background Color
    */

.text .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Products Image Grid
      @section Headline Inner Background Color
    */

.text .inner {
  /*@editable*/
  background-color: #FFFFFF;
}


/*
      @tab Products Image Grid
      @section Images Outer Background Color
    */

.image-grid .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Products Image Grid
      @section Images Inner Background Color
    */

.image-grid .inner {
  /*@editable*/
  background-color: #FFFFFF;
}


/*
      @tab Store Button
      @section Outer Background Color
    */

.notification .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Store Button
      @section Inner Background Color
    */

.notification .inner {
  /*@editable*/
  background-color: #FFFFFF;
}


/*
      @tab Store Button
      @section Button Style
    */

.notification .btn {
  /*@editable*/
  background-color: #232323;
}


/*
      @tab Store Button
      @section Button Style
    */

.notification .btn a {
  /*@editable*/
  color: #FFFFFF;
}


/*
      @tab Store Button
      @section Bottom Spacer
    */

.spacers .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Store Button
      @section Bottom Spacer
    */

.spacers .spacer {
  /*@editable*/
  background-color: #FFFFFF;
  /*@editable*/
  height: 48px;
}


/*
      @tab A Personal Message
      @section Outer Background Color
    */

.team .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab A Personal Message
      @section Inner Background Color
    */

.team .inner {
  /*@editable*/
  background-color: #FFFFFF;
}


/*
      @tab A Personal Message
      @section Button Style
    */

.team .btn {
  /*@editable*/
  background-color: #232323;
}


/*
      @tab A Personal Message
      @section Button Style
    */

.team .btn a {
  /*@editable*/
  color: #FFFFFF;
}


/*
      @tab Footer
      @section Outer Background Color
    */

.footer .outer {
  /*@editable*/
  background-color: #EEEEEE;
}


/*
      @tab Footer
      @section Inner Background Color
    */

.footer .inner-dark {
  /*@editable*/
  background-color: #232323;
}


/*
      @tab Footer
      @section Divider Color
    */

.footer .divider div {
  /*@editable*/
  background-color: #444444;
}

</style></head><body style="Box-sizing:border-Box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

<table mc:repeatable="Footer 3" mc:hideable class="footer wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td class="outer px-sm-16" align="center">
      <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
        <tr>
          <td class="inner-dark px-sm-8" align="left" style="padding: 0 24px;">
            <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 48px;">&zwnj;</div>
            <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
              <tr>
                <td class="col" width="100%" style="padding: 0 8px;">
                  <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                    <tr class="full-width-sm">
                      <td class="col stack-sm-first" width="140" style="padding-right: 8px;">
                        <div class="pb-sm-8">
                          <h4 mc:edit style="color: #888888; font-size: 14px; font-weight: 400; margin: 0;">*|IF:LIST|* *|LIST:COMPANY|* *|END:IF|*</h4>
                          <div class="spacer" style="line-height: 10px;">&zwnj;</div>
                          <p mc:edit class="links-inherit-color" style="color: #888888; margin: 0;">*|IF:LIST|* *|LIST:ADDRESS|* *|END:IF|*</p>
                        </div>
                      </td>
                      <td class="col stack-sm-top text-sm-left pb-sm-16" align="center" width="224" style="padding: 0 8px;">
                        <div mc:edit>
                          <img src="#" alt="Footer logo" width="94">
                        </div>
                        <div class="spacer" style="line-height: 24px;">&zwnj;</div>
                        <div mc:edit>
                          <img src="#" alt="Facebook" width="32">

                          <img src="#" alt="LinkedIn" width="32">
                        </div>
                      </td>
                      <td class="col stack-sm-last text-sm-left" align="right" width="140" style="line-height: 26px; padding-left: 8px;">
                        <p mc:edit style="margin: 0;">
                          <a href="https://example.com" style="color: #888888;">Have Questions?</a>
                        </p>
                        <p mc:edit style="margin: 0;">
                          <a href="*|ARCHIVE|*" style="color: #888888;">Online Version</a>
                        </p>
                        <p mc:edit style="margin: 0;">
                          <a href="*|UNSUB|*" style="color: #888888;">Unsubscribe</a>
                        </p>
                      </td>
                    </tr>
                  </table>
                  <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                    <tr>
                      <td class="divider py-sm-16" style="padding: 32px 0;">
                        <div style="height: 1px; line-height: 1px;">&zwnj;</div>
                      </td>
                    </tr>
                  </table>
                  <p mc:edit style="color: #888888; margin: 0; text-align: center;">
                    &copy; *|DATE:Y|* *|IF:LIST|* *|LIST:COMPANY|* *|END:IF|*. All Rights Reserved.
                  </p>
                  *|IF:REWARDS|*
                  <center>
                    <div mc:edit style="margin-top: 20px;">*|REWARDS|*</div>
                  </center> *|END:IF|*
                </td>
              </tr>
            </table>
            <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）