gpt4 book ai didi

html - 响应式电子邮件模板错误

转载 作者:行者123 更新时间:2023-11-28 04:42:41 24 4
gpt4 key购买 nike

我正在处理一个电子邮件模板,但遇到了三个我似乎无法弄清楚的问题。

  1. 顶部的图片正在拉伸(stretch)。
  2. 电子邮件在 Gmail 应用程序(横向)中没有响应
  3. 左对齐文本在大屏幕上是正确的,但在移动屏幕上偏离居中。 (需要在移动屏幕中禁用添加边距)

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->

<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->

<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->

<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->

<!-- Web Font / @font-face : END -->

<!-- CSS Reset -->
<style>

/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}

/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}

/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}

/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}

/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}

/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}

</style>

<!-- Progressive Enhancements -->
<style>

/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}

/* Media Queries */
@media screen and (max-width: 480px) {

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}

/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}

}

</style>

</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f1f1f1;">

<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->

<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->

<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
 
</td>
</tr>
<!-- Clear Spacer : END -->

<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->

<!-- 3 Even Columns : BEGIN -->
<tr>

<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->

<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
 
</td>
</tr>
<!-- Clear Spacer : END -->

<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
<a href="https://www.revolutionprep.com?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204;">revolutionprep.com</a>
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
<a href="mailto:answers@revolutionprep.com" style="color:#fd8204;">Email us</a> with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<a href="http://twitter.com/revolutionprep?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px"></a>
<a href="http://www.facebook.com/RevolutionPrep?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px"></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr>  <nobr>HIGHER TEST SCORES.</nobr>  <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->

</table>
<!-- Email Body : END -->

<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>

移动端左对齐错误-

Mobile left-align bug -

Outlook 左对齐错误 -

Outlook left-align bug -

移动版 Gmail 应用程序 header 拉伸(stretch)且空白向右(无响应)-

Mobile Gmail App header stretched and white space to right (non-responsive) -

最佳答案

对于左对齐错误,我认为你做的有点不对。试试这个。

<td style="padding: 20px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&amp;utm_campaign=footer&amp;utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>

我只是修改了填充。希望它会有所帮助。我无法为您的第一个问题提供帮助,因为我已经在 jsfiddle 检查并运行了您的代码,您所说的图像问题没有任何问题:/

关于html - 响应式电子邮件模板错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41127672/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com