【发布时间】：2022-01-08 13:19:59
【问题描述】：
我正在开发一个响应式 html 电子邮件模板，该模板在针对 Outlook 桌面显示进行测试时给我带来了问题。您会看到包含顶部按钮的表格，并且电子邮件第二半部分的文本/按钮都被推到了右侧。当它不是移动时，按钮会堆叠 - 这是桌面。我不知道是什么原因造成的，并且尝试了很多似乎无法解决的方法。 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>```
【问题讨论】：
标签： html html-email responsive