响应式 html-Outlook 中的电子邮件呈现问题 - 桌面客户端
Responsive html-email rendering issues in Outlook - Desktop clients
我正在开发响应式 html 电子邮件模板，该模板在针对 Outlook 桌面显示进行测试时出现问题。您会看到包含顶部按钮的 table 和电子邮件第二部分的 text/buttons 都被推到了右边。当它不是移动时，按钮是堆叠的——这是桌面。我不知道是什么原因造成的，并且尝试了很多似乎无法解决的方法。 VML 对这个客户来说非常重要，所以这就是按钮是防弹按钮的原因。另外，我无法访问 Acid 上的电子邮件来自行测试，我猜是因为公司问题，所以我一直在尝试盲目修复，客户正在测试它们并给我结果，但结果并没有真正找到一个解法。我确信这很简单，但我真的很感激此时有其他人关注它。
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--Help character display properly.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Set the initial scale of the email.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Force Outlook clients to render with a better MS engine.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--Help prevent blue links and autolinking-->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--prevent Apple from reformatting and zooming messages.-->
<meta name="x-apple-disable-message-reformatting">
<!--target dark mode-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--to support dark mode meta tags-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!--to force Outlook to use specific fall back font-->
<!--[if mso]>
<style>
p, h1, h2, footer {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
mso-font-alt: ‘Arial’, sans-serif;
src: url(https://fonts.gstatic.com/s/nunitosans/v8/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
</style>
<style type="text/css">
.body-fix {
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
word-spacing: normal;
}
div[style*="margin:16px 0"] {
margin: 0 !important;
}
table, td {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
}
p, h1, h2, h3 {
font-family:'Nunito Sans', Arial, Helvetica, sans-serif !important;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.link:hover {
text-decoration: none !important;
}
* {
box-sizing: border-box;
}
.mobile {
display: none;
}
</style>
<!--mobile styles-->
<style>
@media only screen and (max-width: 640px) {
.contenttable {
width:220px!important;
padding:10px;
}
}
@media screen and (max-width:531px) {
.column {width: 100%;text-align:center!important;padding:10px;}
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }
.cTxt { text-align: center !important; }
.tPad-0 { padding-top: 0 !important; }
.rPad-0 { padding-right: 0 !important; }
.lPad-0 { padding-left: 0 !important; }
.bPad-30 { padding-bottom: 30px !important; }
.imgFull { width: 100% !important; height: auto !important; }
.desktop { width: 0 !important; display: none !important; }
.mobile { display: block !important; }
h1 { font-size: 35px !important; line-height: 42px !important; }
p { font-size: 25px !important; line-height: 35px !important; }
.footer {font-size:9px;line-height:11px;}
}
</style>
<!--dark mode styles-->
<style>
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
/* Custom Dark Mode Background Color */
.darkmode { background-color: #100E11 !important; }
.darkmode2 { background-color: #020203 !important; }
.darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, p, span, a { color: #9CCFF3!important; }
h2, h2 a { color: #9CCFF3 !important; }
.white { color: #FFFFFF !important; }
/* Custom Dark Mode Text Link Color */
.link { color: #FFFFFF !important; }
.footer a.link { color: #FFFFFF !important; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img {
display: none;
display: none !important;
}
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #100E11 !important; }
[data-ogsc] .darkmode2 { background-color: #020203 !important; }
[data-ogsc] .darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a { color: #9CCFF3!important; }
[data-ogsc] h2, [data-ogsc] h2 a { color: #9CCFF3!important; }
[data-ogsc] .white { color: #9CCFF3 !important; }
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color:#9CCFF3 !important; }
[data-ogsc] .footer a.link { color: #9CCFF3!important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<title></title>
</head>
<body id="body" class="darkmode body body-fix">
<div role="article" aria-roledescription="email" aria-label="Email from ForeverCar" xml:lang="en" lang="en">
<!--hidden preheader with preh-header spacer hack-->
<div style="display: none; max-height: 0px; overflow: hidden;"> Lock in your 2021 member rate before it's too late</div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;"> ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<!--[if mso | IE]> <style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="fff"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <table bgcolor="fff" role="presentation" border="0" cellpadding="0" cellspacing="0" width="680" align="center" style="width:680px;"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<!--start of email-->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;background-color: #ffffff;">
<!--main content area-->
<tr>
<td class="tPad-0" align="center" valign="top" style="padding-top: 20px;"><table class="w100p" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;background-color: #ffffff;">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom" bgcolor="#ffffff" style="padding:10px 10px 10px 10px;"><img src="images/Forevercar-horizontal-logo.jpg" width="250" height="52" style="display: block;font-family: sans-serif; font-size: 16px; color: #40505d;" alt="ForeverCar logo"/></td>
<td width="42%" align="right" valign="bottom" bgcolor="#ffffff" style="font-size:10px;color:#000000;font-family: 'Nunito Sans', sans-serif; sans-serif;padding:0px 0px 20px 0px;"><strong>FOR MEMBERS OF</strong></td>
<td width="13%" align="right" valign="bottom" bgcolor="#ffffff" style="padding:0px 10px 10px 10px;"><img src="images/FortBragg-logo.png" width="60" height="51" style="display: block;font-family: sans-serif; font-size: 16px; color: #000000;" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/top-divider.jpg" width="600" height="23" class="imgFull" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode" align="center" valign="top" style="background-color:#f0efed;padding:20px;"><!--Intro copy-->
<h1 style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0 20px; font-size: 23px; line-height: 32px; font-weight: normal; color: #40505d;tetext-align:center;">Finalize your vehicle protection before January 1 to <strong>lock in your best rate.</strong></h1></td>
</tr>
<tr>
<td style="background-color:#f0efed;padding-bottom:20px;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="contenttable">
<tr>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm Your Quote</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td valign="top">
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Phone Number</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Chat With Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-BANNER.png" width="2500" height="1348" class="imgFull" alt="A better car repair experience, so you can get back to your life." style="width: 100%; max-width: 600px; height: auto;display:block;color: #40505d; font-family:'Nunito Sans', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" class="darkmode" style="padding: 30px;background-color:#f0efed;"><!--Paragraph-->
<p style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0;font-size: 18px; line-height: 23px; text-align: center; color: #40505d; font-weight: normal; text-align: left;"> <strong><Contact First Name> </strong><br>
<br>
Thank you for your interest in <strong>Mechanical Repair Coverage </strong>for your vehicle.
The new year is fast approaching, and there couldn’t be a better time to <strong>finalize your quote</strong>. Remember, as a CU member, you’re eligible for up to 25%* off mechanical repair coverage from ForeverCar. <br>
<br>
Take action now and you won’t have to pay for unexpected covered repairs in the year ahead. You can use a qualified mechanic you know and trust … and pay just the <strong>customized deductible</strong> you choose based on the plan you select. <br>
<br>
Since the cost of coverage is based on your vehicle’s age and mileage, it makes sense to <strong>revisit your quote</strong> now and lock in your best price. The longer you wait, the more coverage may cost. </p></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;text-align:center;padding:0px;"><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-25OFF.png" width="455" height="177" class="imgFull" alt="SAVE UP TO 25% OFF* Mechanical Repair" style="display:block;text-align: center; max-width:600px;color:#40505d;font-family:'Nunito Sans', Arial, sans-serif; text-align:center;font-size:16px;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/bottom-divider.jpg" class="imgFull" width="600" height="60" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode footer" align="left" valign="top" style="padding:10px 30px; background: #ffffff;color:#9f9f9f;font-family: 'Nunito Sans', sans-serif;font-size: 9px; line-height: 11px; margin: 0;"><!--Footer-->
* Member savings is based on a 2019 study of the average savings of the exclusive member price compared to the cost of equivalent plans in the ForeverCar Marketplace or through the ForeverCar call center.<br>
<br>
Mechanical Repair Coverage is provided and administered by Consumer Program Administrators, Inc. in all states except CA, where coverage is Mechanical Breakdown Insurance, offered as insurance by Virginia Surety Company, Inc., in NH, where coverage is provided and administered by Consumer Program Administrators, Inc. dba Consumer Warranty Program Administrators, in TX, where coverage is provided and administered by Consumer Program Administrators, Inc. dba The Administrators of Consumer Programs (TX License #175), in FL and OK, where coverage is provided and administered by Automotive Warranty Services of Florida, Inc. (FL License #60023 and OK License #44198051), and in WA, where coverage is provided by National Product Care Company and administered by Consumer Program Administrators, Inc., all located at 175 West Jackson Blvd., Chicago, IL 60604, 1-800-752-6265. Coverage varies by state. Replacement parts may be new, used, non-OEM or remanufactured. Be sure to read the Vehicle Service Contract or the Insurance Policy, which will explain the exact terms, conditions, and exclusions of this voluntary product.<br>
<br>
This email message contains information regarding products and services made available to you by ForeverCar LLC (CA License # 0L78726), an affiliate of CUNA Mutual Insurance Agency, Inc., for credit union members. If you do not wish to receive email messages from ForeverCar that are advertising or promotional in nature, please unsubscribe.<br>
<br>
ForeverCar 954 W Washington Blvd #340, Chicago, IL 60607 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>```
您正在关闭并打开第一个和第二个 200 像素宽度表格之间的另一个 td。删除它应该会为您解决问题。
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--Help character display properly.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Set the initial scale of the email.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Force Outlook clients to render with a better MS engine.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--Help prevent blue links and autolinking-->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--prevent Apple from reformatting and zooming messages.-->
<meta name="x-apple-disable-message-reformatting">
<!--target dark mode-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--to support dark mode meta tags-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!--to force Outlook to use specific fall back font-->
<!--[if mso]>
<style>
p, h1, h2, footer {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
mso-font-alt: ‘Arial’, sans-serif;
src: url(https://fonts.gstatic.com/s/nunitosans/v8/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
</style>
<style type="text/css">
.body-fix {
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
word-spacing: normal;
}
div[style*="margin:16px 0"] {
margin: 0 !important;
}
table, td {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
}
p, h1, h2, h3 {
font-family:'Nunito Sans', Arial, Helvetica, sans-serif !important;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.link:hover {
text-decoration: none !important;
}
* {
box-sizing: border-box;
}
.mobile {
display: none;
}
</style>
<!--mobile styles-->
<style>
@media only screen and (max-width: 640px) {
.contenttable {
width:220px!important;
padding:10px;
}
}
@media screen and (max-width:531px) {
.column {width: 100%;text-align:center!important;padding:10px;}
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }
.cTxt { text-align: center !important; }
.tPad-0 { padding-top: 0 !important; }
.rPad-0 { padding-right: 0 !important; }
.lPad-0 { padding-left: 0 !important; }
.bPad-30 { padding-bottom: 30px !important; }
.imgFull { width: 100% !important; height: auto !important; }
.desktop { width: 0 !important; display: none !important; }
.mobile { display: block !important; }
h1 { font-size: 35px !important; line-height: 42px !important; }
p { font-size: 25px !important; line-height: 35px !important; }
.footer {font-size:9px;line-height:11px;}
}
</style>
<!--dark mode styles-->
<style>
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
/* Custom Dark Mode Background Color */
.darkmode { background-color: #100E11 !important; }
.darkmode2 { background-color: #020203 !important; }
.darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, p, span, a { color: #9CCFF3!important; }
h2, h2 a { color: #9CCFF3 !important; }
.white { color: #FFFFFF !important; }
/* Custom Dark Mode Text Link Color */
.link { color: #FFFFFF !important; }
.footer a.link { color: #FFFFFF !important; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img {
display: none;
display: none !important;
}
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #100E11 !important; }
[data-ogsc] .darkmode2 { background-color: #020203 !important; }
[data-ogsc] .darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a { color: #9CCFF3!important; }
[data-ogsc] h2, [data-ogsc] h2 a { color: #9CCFF3!important; }
[data-ogsc] .white { color: #9CCFF3 !important; }
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color:#9CCFF3 !important; }
[data-ogsc] .footer a.link { color: #9CCFF3!important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<title></title>
</head>
<body id="body" class="darkmode body body-fix">
<div role="article" aria-roledescription="email" aria-label="Email from ForeverCar" xml:lang="en" lang="en">
<!--hidden preheader with preh-header spacer hack-->
<div style="display: none; max-height: 0px; overflow: hidden;"> Lock in your 2021 member rate before it's too late</div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;"> ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<!--[if mso | IE]> <style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="fff"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <table bgcolor="fff" role="presentation" border="0" cellpadding="0" cellspacing="0" width="680" align="center" style="width:680px;"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<!--start of email-->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;background-color: #ffffff;">
<!--main content area-->
<tr>
<td class="tPad-0" align="center" valign="top" style="padding-top: 20px;"><table class="w100p" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;background-color: #ffffff;">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom" bgcolor="#ffffff" style="padding:10px 10px 10px 10px;"><img src="images/Forevercar-horizontal-logo.jpg" width="250" height="52" style="display: block;font-family: sans-serif; font-size: 16px; color: #40505d;" alt="ForeverCar logo"/></td>
<td width="42%" align="right" valign="bottom" bgcolor="#ffffff" style="font-size:10px;color:#000000;font-family: 'Nunito Sans', sans-serif; sans-serif;padding:0px 0px 20px 0px;"><strong>FOR MEMBERS OF</strong></td>
<td width="13%" align="right" valign="bottom" bgcolor="#ffffff" style="padding:0px 10px 10px 10px;"><img src="images/FortBragg-logo.png" width="60" height="51" style="display: block;font-family: sans-serif; font-size: 16px; color: #000000;" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/top-divider.jpg" width="600" height="23" class="imgFull" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode" align="center" valign="top" style="background-color:#f0efed;padding:20px;"><!--Intro copy-->
<h1 style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0 20px; font-size: 23px; line-height: 32px; font-weight: normal; color: #40505d;tetext-align:center;">Finalize your vehicle protection before January 1 to <strong>lock in your best rate.</strong></h1></td>
</tr>
<tr>
<td style="background-color:#f0efed;padding-bottom:20px;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="contenttable">
<tr>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm Your Quote</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Phone Number</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Chat With Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-BANNER.png" width="2500" height="1348" class="imgFull" alt="A better car repair experience, so you can get back to your life." style="width: 100%; max-width: 600px; height: auto;display:block;color: #40505d; font-family:'Nunito Sans', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" class="darkmode" style="padding: 30px;background-color:#f0efed;"><!--Paragraph-->
<p style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0;font-size: 18px; line-height: 23px; text-align: center; color: #40505d; font-weight: normal; text-align: left;"> <strong><Contact First Name> </strong><br>
<br>
Thank you for your interest in <strong>Mechanical Repair Coverage </strong>for your vehicle.
The new year is fast approaching, and there couldn’t be a better time to <strong>finalize your quote</strong>. Remember, as a CU member, you’re eligible for up to 25%* off mechanical repair coverage from ForeverCar. <br>
<br>
Take action now and you won’t have to pay for unexpected covered repairs in the year ahead. You can use a qualified mechanic you know and trust … and pay just the <strong>customized deductible</strong> you choose based on the plan you select. <br>
<br>
Since the cost of coverage is based on your vehicle’s age and mileage, it makes sense to <strong>revisit your quote</strong> now and lock in your best price. The longer you wait, the more coverage may cost. </p></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;text-align:center;padding:0px;"><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-25OFF.png" width="455" height="177" class="imgFull" alt="SAVE UP TO 25% OFF* Mechanical Repair" style="display:block;text-align: center; max-width:600px;color:#40505d;font-family:'Nunito Sans', Arial, sans-serif; text-align:center;font-size:16px;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/bottom-divider.jpg" class="imgFull" width="600" height="60" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode footer" align="left" valign="top" style="padding:10px 30px; background: #ffffff;color:#9f9f9f;font-family: 'Nunito Sans', sans-serif;font-size: 9px; line-height: 11px; margin: 0;"><!--Footer-->
* Member savings is based on a 2019 study of the average savings of the exclusive member price compared to the cost of equivalent plans in the ForeverCar Marketplace or through the ForeverCar call center.<br>
<br>
Mechanical Repair Coverage is provided and administered by Consumer Program Administrators, Inc. in all states except CA, where coverage is Mechanical Breakdown Insurance, offered as insurance by Virginia Surety Company, Inc., in NH, where coverage is provided and administered by Consumer Program Administrators, Inc. dba Consumer Warranty Program Administrators, in TX, where coverage is provided and administered by Consumer Program Administrators, Inc. dba The Administrators of Consumer Programs (TX License #175), in FL and OK, where coverage is provided and administered by Automotive Warranty Services of Florida, Inc. (FL License #60023 and OK License #44198051), and in WA, where coverage is provided by National Product Care Company and administered by Consumer Program Administrators, Inc., all located at 175 West Jackson Blvd., Chicago, IL 60604, 1-800-752-6265. Coverage varies by state. Replacement parts may be new, used, non-OEM or remanufactured. Be sure to read the Vehicle Service Contract or the Insurance Policy, which will explain the exact terms, conditions, and exclusions of this voluntary product.<br>
<br>
This email message contains information regarding products and services made available to you by ForeverCar LLC (CA License # 0L78726), an affiliate of CUNA Mutual Insurance Agency, Inc., for credit union members. If you do not wish to receive email messages from ForeverCar that are advertising or promotional in nature, please unsubscribe.<br>
<br>
ForeverCar 954 W Washington Blvd #340, Chicago, IL 60607 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
如果出现这种情况，一般是ghost tables。 find/fix 的唯一方法是手动进入并检查开始和结束标签。
我正在开发响应式 html 电子邮件模板，该模板在针对 Outlook 桌面显示进行测试时出现问题。您会看到包含顶部按钮的 table 和电子邮件第二部分的 text/buttons 都被推到了右边。当它不是移动时，按钮是堆叠的——这是桌面。我不知道是什么原因造成的，并且尝试了很多似乎无法解决的方法。 VML 对这个客户来说非常重要，所以这就是按钮是防弹按钮的原因。另外，我无法访问 Acid 上的电子邮件来自行测试，我猜是因为公司问题，所以我一直在尝试盲目修复，客户正在测试它们并给我结果，但结果并没有真正找到一个解法。我确信这很简单，但我真的很感激此时有其他人关注它。
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--Help character display properly.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Set the initial scale of the email.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Force Outlook clients to render with a better MS engine.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--Help prevent blue links and autolinking-->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--prevent Apple from reformatting and zooming messages.-->
<meta name="x-apple-disable-message-reformatting">
<!--target dark mode-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--to support dark mode meta tags-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!--to force Outlook to use specific fall back font-->
<!--[if mso]>
<style>
p, h1, h2, footer {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
mso-font-alt: ‘Arial’, sans-serif;
src: url(https://fonts.gstatic.com/s/nunitosans/v8/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
</style>
<style type="text/css">
.body-fix {
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
word-spacing: normal;
}
div[style*="margin:16px 0"] {
margin: 0 !important;
}
table, td {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
}
p, h1, h2, h3 {
font-family:'Nunito Sans', Arial, Helvetica, sans-serif !important;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.link:hover {
text-decoration: none !important;
}
* {
box-sizing: border-box;
}
.mobile {
display: none;
}
</style>
<!--mobile styles-->
<style>
@media only screen and (max-width: 640px) {
.contenttable {
width:220px!important;
padding:10px;
}
}
@media screen and (max-width:531px) {
.column {width: 100%;text-align:center!important;padding:10px;}
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }
.cTxt { text-align: center !important; }
.tPad-0 { padding-top: 0 !important; }
.rPad-0 { padding-right: 0 !important; }
.lPad-0 { padding-left: 0 !important; }
.bPad-30 { padding-bottom: 30px !important; }
.imgFull { width: 100% !important; height: auto !important; }
.desktop { width: 0 !important; display: none !important; }
.mobile { display: block !important; }
h1 { font-size: 35px !important; line-height: 42px !important; }
p { font-size: 25px !important; line-height: 35px !important; }
.footer {font-size:9px;line-height:11px;}
}
</style>
<!--dark mode styles-->
<style>
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
/* Custom Dark Mode Background Color */
.darkmode { background-color: #100E11 !important; }
.darkmode2 { background-color: #020203 !important; }
.darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, p, span, a { color: #9CCFF3!important; }
h2, h2 a { color: #9CCFF3 !important; }
.white { color: #FFFFFF !important; }
/* Custom Dark Mode Text Link Color */
.link { color: #FFFFFF !important; }
.footer a.link { color: #FFFFFF !important; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img {
display: none;
display: none !important;
}
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #100E11 !important; }
[data-ogsc] .darkmode2 { background-color: #020203 !important; }
[data-ogsc] .darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a { color: #9CCFF3!important; }
[data-ogsc] h2, [data-ogsc] h2 a { color: #9CCFF3!important; }
[data-ogsc] .white { color: #9CCFF3 !important; }
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color:#9CCFF3 !important; }
[data-ogsc] .footer a.link { color: #9CCFF3!important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<title></title>
</head>
<body id="body" class="darkmode body body-fix">
<div role="article" aria-roledescription="email" aria-label="Email from ForeverCar" xml:lang="en" lang="en">
<!--hidden preheader with preh-header spacer hack-->
<div style="display: none; max-height: 0px; overflow: hidden;"> Lock in your 2021 member rate before it's too late</div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;"> ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<!--[if mso | IE]> <style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="fff"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <table bgcolor="fff" role="presentation" border="0" cellpadding="0" cellspacing="0" width="680" align="center" style="width:680px;"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<!--start of email-->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;background-color: #ffffff;">
<!--main content area-->
<tr>
<td class="tPad-0" align="center" valign="top" style="padding-top: 20px;"><table class="w100p" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;background-color: #ffffff;">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom" bgcolor="#ffffff" style="padding:10px 10px 10px 10px;"><img src="images/Forevercar-horizontal-logo.jpg" width="250" height="52" style="display: block;font-family: sans-serif; font-size: 16px; color: #40505d;" alt="ForeverCar logo"/></td>
<td width="42%" align="right" valign="bottom" bgcolor="#ffffff" style="font-size:10px;color:#000000;font-family: 'Nunito Sans', sans-serif; sans-serif;padding:0px 0px 20px 0px;"><strong>FOR MEMBERS OF</strong></td>
<td width="13%" align="right" valign="bottom" bgcolor="#ffffff" style="padding:0px 10px 10px 10px;"><img src="images/FortBragg-logo.png" width="60" height="51" style="display: block;font-family: sans-serif; font-size: 16px; color: #000000;" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/top-divider.jpg" width="600" height="23" class="imgFull" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode" align="center" valign="top" style="background-color:#f0efed;padding:20px;"><!--Intro copy-->
<h1 style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0 20px; font-size: 23px; line-height: 32px; font-weight: normal; color: #40505d;tetext-align:center;">Finalize your vehicle protection before January 1 to <strong>lock in your best rate.</strong></h1></td>
</tr>
<tr>
<td style="background-color:#f0efed;padding-bottom:20px;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="contenttable">
<tr>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm Your Quote</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td valign="top">
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Phone Number</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Chat With Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-BANNER.png" width="2500" height="1348" class="imgFull" alt="A better car repair experience, so you can get back to your life." style="width: 100%; max-width: 600px; height: auto;display:block;color: #40505d; font-family:'Nunito Sans', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" class="darkmode" style="padding: 30px;background-color:#f0efed;"><!--Paragraph-->
<p style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0;font-size: 18px; line-height: 23px; text-align: center; color: #40505d; font-weight: normal; text-align: left;"> <strong><Contact First Name> </strong><br>
<br>
Thank you for your interest in <strong>Mechanical Repair Coverage </strong>for your vehicle.
The new year is fast approaching, and there couldn’t be a better time to <strong>finalize your quote</strong>. Remember, as a CU member, you’re eligible for up to 25%* off mechanical repair coverage from ForeverCar. <br>
<br>
Take action now and you won’t have to pay for unexpected covered repairs in the year ahead. You can use a qualified mechanic you know and trust … and pay just the <strong>customized deductible</strong> you choose based on the plan you select. <br>
<br>
Since the cost of coverage is based on your vehicle’s age and mileage, it makes sense to <strong>revisit your quote</strong> now and lock in your best price. The longer you wait, the more coverage may cost. </p></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;text-align:center;padding:0px;"><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-25OFF.png" width="455" height="177" class="imgFull" alt="SAVE UP TO 25% OFF* Mechanical Repair" style="display:block;text-align: center; max-width:600px;color:#40505d;font-family:'Nunito Sans', Arial, sans-serif; text-align:center;font-size:16px;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/bottom-divider.jpg" class="imgFull" width="600" height="60" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode footer" align="left" valign="top" style="padding:10px 30px; background: #ffffff;color:#9f9f9f;font-family: 'Nunito Sans', sans-serif;font-size: 9px; line-height: 11px; margin: 0;"><!--Footer-->
* Member savings is based on a 2019 study of the average savings of the exclusive member price compared to the cost of equivalent plans in the ForeverCar Marketplace or through the ForeverCar call center.<br>
<br>
Mechanical Repair Coverage is provided and administered by Consumer Program Administrators, Inc. in all states except CA, where coverage is Mechanical Breakdown Insurance, offered as insurance by Virginia Surety Company, Inc., in NH, where coverage is provided and administered by Consumer Program Administrators, Inc. dba Consumer Warranty Program Administrators, in TX, where coverage is provided and administered by Consumer Program Administrators, Inc. dba The Administrators of Consumer Programs (TX License #175), in FL and OK, where coverage is provided and administered by Automotive Warranty Services of Florida, Inc. (FL License #60023 and OK License #44198051), and in WA, where coverage is provided by National Product Care Company and administered by Consumer Program Administrators, Inc., all located at 175 West Jackson Blvd., Chicago, IL 60604, 1-800-752-6265. Coverage varies by state. Replacement parts may be new, used, non-OEM or remanufactured. Be sure to read the Vehicle Service Contract or the Insurance Policy, which will explain the exact terms, conditions, and exclusions of this voluntary product.<br>
<br>
This email message contains information regarding products and services made available to you by ForeverCar LLC (CA License # 0L78726), an affiliate of CUNA Mutual Insurance Agency, Inc., for credit union members. If you do not wish to receive email messages from ForeverCar that are advertising or promotional in nature, please unsubscribe.<br>
<br>
ForeverCar 954 W Washington Blvd #340, Chicago, IL 60607 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>```
您正在关闭并打开第一个和第二个 200 像素宽度表格之间的另一个 td。删除它应该会为您解决问题。
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--Help character display properly.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Set the initial scale of the email.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Force Outlook clients to render with a better MS engine.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--Help prevent blue links and autolinking-->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--prevent Apple from reformatting and zooming messages.-->
<meta name="x-apple-disable-message-reformatting">
<!--target dark mode-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--to support dark mode meta tags-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!--to force Outlook to use specific fall back font-->
<!--[if mso]>
<style>
p, h1, h2, footer {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
mso-font-alt: ‘Arial’, sans-serif;
src: url(https://fonts.gstatic.com/s/nunitosans/v8/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
</style>
<style type="text/css">
.body-fix {
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
word-spacing: normal;
}
div[style*="margin:16px 0"] {
margin: 0 !important;
}
table, td {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
}
p, h1, h2, h3 {
font-family:'Nunito Sans', Arial, Helvetica, sans-serif !important;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.link:hover {
text-decoration: none !important;
}
* {
box-sizing: border-box;
}
.mobile {
display: none;
}
</style>
<!--mobile styles-->
<style>
@media only screen and (max-width: 640px) {
.contenttable {
width:220px!important;
padding:10px;
}
}
@media screen and (max-width:531px) {
.column {width: 100%;text-align:center!important;padding:10px;}
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }
.cTxt { text-align: center !important; }
.tPad-0 { padding-top: 0 !important; }
.rPad-0 { padding-right: 0 !important; }
.lPad-0 { padding-left: 0 !important; }
.bPad-30 { padding-bottom: 30px !important; }
.imgFull { width: 100% !important; height: auto !important; }
.desktop { width: 0 !important; display: none !important; }
.mobile { display: block !important; }
h1 { font-size: 35px !important; line-height: 42px !important; }
p { font-size: 25px !important; line-height: 35px !important; }
.footer {font-size:9px;line-height:11px;}
}
</style>
<!--dark mode styles-->
<style>
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
/* Custom Dark Mode Background Color */
.darkmode { background-color: #100E11 !important; }
.darkmode2 { background-color: #020203 !important; }
.darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, p, span, a { color: #9CCFF3!important; }
h2, h2 a { color: #9CCFF3 !important; }
.white { color: #FFFFFF !important; }
/* Custom Dark Mode Text Link Color */
.link { color: #FFFFFF !important; }
.footer a.link { color: #FFFFFF !important; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img {
display: none;
display: none !important;
}
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #100E11 !important; }
[data-ogsc] .darkmode2 { background-color: #020203 !important; }
[data-ogsc] .darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a { color: #9CCFF3!important; }
[data-ogsc] h2, [data-ogsc] h2 a { color: #9CCFF3!important; }
[data-ogsc] .white { color: #9CCFF3 !important; }
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color:#9CCFF3 !important; }
[data-ogsc] .footer a.link { color: #9CCFF3!important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<title></title>
</head>
<body id="body" class="darkmode body body-fix">
<div role="article" aria-roledescription="email" aria-label="Email from ForeverCar" xml:lang="en" lang="en">
<!--hidden preheader with preh-header spacer hack-->
<div style="display: none; max-height: 0px; overflow: hidden;"> Lock in your 2021 member rate before it's too late</div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;"> ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<!--[if mso | IE]> <style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="fff"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <table bgcolor="fff" role="presentation" border="0" cellpadding="0" cellspacing="0" width="680" align="center" style="width:680px;"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<!--start of email-->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;background-color: #ffffff;">
<!--main content area-->
<tr>
<td class="tPad-0" align="center" valign="top" style="padding-top: 20px;"><table class="w100p" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;background-color: #ffffff;">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom" bgcolor="#ffffff" style="padding:10px 10px 10px 10px;"><img src="images/Forevercar-horizontal-logo.jpg" width="250" height="52" style="display: block;font-family: sans-serif; font-size: 16px; color: #40505d;" alt="ForeverCar logo"/></td>
<td width="42%" align="right" valign="bottom" bgcolor="#ffffff" style="font-size:10px;color:#000000;font-family: 'Nunito Sans', sans-serif; sans-serif;padding:0px 0px 20px 0px;"><strong>FOR MEMBERS OF</strong></td>
<td width="13%" align="right" valign="bottom" bgcolor="#ffffff" style="padding:0px 10px 10px 10px;"><img src="images/FortBragg-logo.png" width="60" height="51" style="display: block;font-family: sans-serif; font-size: 16px; color: #000000;" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/top-divider.jpg" width="600" height="23" class="imgFull" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode" align="center" valign="top" style="background-color:#f0efed;padding:20px;"><!--Intro copy-->
<h1 style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0 20px; font-size: 23px; line-height: 32px; font-weight: normal; color: #40505d;tetext-align:center;">Finalize your vehicle protection before January 1 to <strong>lock in your best rate.</strong></h1></td>
</tr>
<tr>
<td style="background-color:#f0efed;padding-bottom:20px;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="contenttable">
<tr>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm Your Quote</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Phone Number</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Chat With Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-BANNER.png" width="2500" height="1348" class="imgFull" alt="A better car repair experience, so you can get back to your life." style="width: 100%; max-width: 600px; height: auto;display:block;color: #40505d; font-family:'Nunito Sans', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" class="darkmode" style="padding: 30px;background-color:#f0efed;"><!--Paragraph-->
<p style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0;font-size: 18px; line-height: 23px; text-align: center; color: #40505d; font-weight: normal; text-align: left;"> <strong><Contact First Name> </strong><br>
<br>
Thank you for your interest in <strong>Mechanical Repair Coverage </strong>for your vehicle.
The new year is fast approaching, and there couldn’t be a better time to <strong>finalize your quote</strong>. Remember, as a CU member, you’re eligible for up to 25%* off mechanical repair coverage from ForeverCar. <br>
<br>
Take action now and you won’t have to pay for unexpected covered repairs in the year ahead. You can use a qualified mechanic you know and trust … and pay just the <strong>customized deductible</strong> you choose based on the plan you select. <br>
<br>
Since the cost of coverage is based on your vehicle’s age and mileage, it makes sense to <strong>revisit your quote</strong> now and lock in your best price. The longer you wait, the more coverage may cost. </p></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;text-align:center;padding:0px;"><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-25OFF.png" width="455" height="177" class="imgFull" alt="SAVE UP TO 25% OFF* Mechanical Repair" style="display:block;text-align: center; max-width:600px;color:#40505d;font-family:'Nunito Sans', Arial, sans-serif; text-align:center;font-size:16px;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/bottom-divider.jpg" class="imgFull" width="600" height="60" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode footer" align="left" valign="top" style="padding:10px 30px; background: #ffffff;color:#9f9f9f;font-family: 'Nunito Sans', sans-serif;font-size: 9px; line-height: 11px; margin: 0;"><!--Footer-->
* Member savings is based on a 2019 study of the average savings of the exclusive member price compared to the cost of equivalent plans in the ForeverCar Marketplace or through the ForeverCar call center.<br>
<br>
Mechanical Repair Coverage is provided and administered by Consumer Program Administrators, Inc. in all states except CA, where coverage is Mechanical Breakdown Insurance, offered as insurance by Virginia Surety Company, Inc., in NH, where coverage is provided and administered by Consumer Program Administrators, Inc. dba Consumer Warranty Program Administrators, in TX, where coverage is provided and administered by Consumer Program Administrators, Inc. dba The Administrators of Consumer Programs (TX License #175), in FL and OK, where coverage is provided and administered by Automotive Warranty Services of Florida, Inc. (FL License #60023 and OK License #44198051), and in WA, where coverage is provided by National Product Care Company and administered by Consumer Program Administrators, Inc., all located at 175 West Jackson Blvd., Chicago, IL 60604, 1-800-752-6265. Coverage varies by state. Replacement parts may be new, used, non-OEM or remanufactured. Be sure to read the Vehicle Service Contract or the Insurance Policy, which will explain the exact terms, conditions, and exclusions of this voluntary product.<br>
<br>
This email message contains information regarding products and services made available to you by ForeverCar LLC (CA License # 0L78726), an affiliate of CUNA Mutual Insurance Agency, Inc., for credit union members. If you do not wish to receive email messages from ForeverCar that are advertising or promotional in nature, please unsubscribe.<br>
<br>
ForeverCar 954 W Washington Blvd #340, Chicago, IL 60607 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
如果出现这种情况，一般是ghost tables。 find/fix 的唯一方法是手动进入并检查开始和结束标签。