如何解决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;">‌</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;">‌</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;">‌</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;">‌</div>
</td>
</tr>
</table>
<p mc:edit style="color: #888888; margin: 0; text-align: center;">
© *|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;">‌</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。