电子邮件未格式化为 gmail
Posted
技术标签:
【中文标题】电子邮件未格式化为 gmail【英文标题】：Email not formatting for gmail 【发布时间】：2019-09-01 02:05:55 【问题描述】：How it shows in Gmail How it shows in YahooAccurate Design
我一直遇到电子邮件在某些平台上格式不正确的问题。它似乎删除了 yahoo 中的图像和背景颜色，并且只是将 Gmail 中的所有内容都弄乱了。苹果很好。
我对代码不是很了解，我可以进行更改，但不确定要添加或更改什么以与所有平台兼容。我认为这与背景颜色和图片的编码方式有关。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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>
<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. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<!-- CSS Reset : BEGIN -->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style type="text/css">
html,body
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
*
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
div[style*=margin: 16px 0]
margin:0 !important;
table,td
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
table
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
img
-ms-interpolation-mode:bicubic;
a
text-decoration:none;
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
.a6S
display:none !important;
opacity:.01 !important;
.im
color:inherit !important;
img.g-img+div
display:none !important;
@media only screen and (min-device-width: 320px) and (max-device-width: 374px)
u ~ div .email-container
min-width:320px !important;
@media only screen and (min-device-width: 375px) and (max-device-width: 413px)
u ~ div .email-container
min-width:375px !important;
@media only screen and (min-device-width: 414px)
u ~ div .email-container
min-width:414px !important;
html,body
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
*
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
div[style*=margin: 16px 0]
margin:0 !important;
table,td
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
table
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
img
-ms-interpolation-mode:bicubic;
a
text-decoration:none;
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
.a6S
display:none !important;
opacity:.01 !important;
.im
color:inherit !important;
img.g-img+div
display:none !important;
@media only screen and (min-device-width: 320px) and (max-device-width: 374px)
u ~ div .email-container
min-width:320px !important;
@media only screen and (min-device-width: 375px) and (max-device-width: 413px)
u ~ div .email-container
min-width:375px !important;
@media only screen and (min-device-width: 414px)
u ~ div .email-container
min-width:414px !important;
.primary
background:#f5564e;
.bg_white
background:#ffffff;
.bg_light
background:#fafafa;
.bg_black
background:#000000;
.bg_dark
background:rgba(0,0,0,.8);
.email-section
padding:2.5em;
.btn
padding:12px 20px;
display:inline-block;
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
.btn.btn-primary
border-radius:30px;
background:#36b1ce;
font-size:13px;
color:#ffffff;
.btn.btn-white
border-radius:5px;
background:#ffffff;
color:#000000;
.btn.btn-white-outline
border-radius:5px;
background:transparent;
border:1px solid #fff;
color:#fff;
h1,h2,h3,h4,h5,h6
font-family:'Raleway',sans-serif;
color:#000000;
margin-top:0;
body
font-family:'Raleway',sans-serif;
font-weight:400;
font-size:15px;
line-height:1.8;
color:rgba(0,0,0,.4);
a
color:#f5564e;
.logo h1
margin:0;
.logo h1 a
color:#000;
font-size:20px;
font-weight:700;
text-transform:uppercase;
font-family:'Raleway',sans-serif;
.navigation
padding:0;
.navigation li
list-style:none;
display:inline-block;
margin-left:5px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
.navigation li a
color:rgba(0,0,0,.6);
.hero
position:relative;
z-index:0;
.hero .overlay
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
.hero .icon a
display:block;
width:60px;
margin:0 auto;
.hero .text
color:rgba(255,255,255,.8);
padding:0 4em;
.hero .text h2
color:#ffffff;
font-size:40px;
margin-bottom:0;
line-height:1.2;
font-weight:300;
.heading-section h2
color:#000000;
font-size:30px;
margin-top:0;
line-height:1.4;
font-weight:300;
.heading-section .subheading
margin-bottom:20px !important;
display:inline-block;
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
color:rgba(0,0,0,.4);
position:relative;
.heading-section .subheading::after
position:absolute;
left:0;
right:0;
bottom:-10px;
content:'';
width:100%;
height:2px;
background:#f5564e;
margin:0 auto;
.heading-section-white
color:rgba(255,255,255,.8);
.heading-section-white h2
line-height:1;
font-weight:300;
font-size:30px;
padding-bottom:0;
.heading-section-white h2
color:#ffffff;
.heading-section-white .subheading
margin-bottom:0;
display:inline-block;
font-size:30px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:300;
color:rgba(255,255,255,.4);
.icon
text-align:center;
.services
background:rgba(0,0,0,.03);
.text-services
padding:20px 10px 0;
text-align:center;
background:#fafafa;
.text-services h4
font-size:15px;
text-transform:uppercase;
letter-spacing:.5px;
color:#36b1ce;
font-weight:600;
.services-list
padding:0;
margin:0 0 10px;
width:100%;
float:left;
.services-list .text
width:100%;
float:right;
.services-list h3
margin-top:0;
margin-bottom:0;
font-size:15px;
.services-list p
margin:0;
.text-tour
padding-top:10px;
.text-tour h3
margin-bottom:0;
.text-tour h3 a
color:#000;
.text-services .meta
text-transform:uppercase;
font-size:14px;
.text-testimony .name
margin:0;
.text-testimony .position
color:rgba(0,0,0,.3);
.counter
width:100%;
position:relative;
z-index:0;
.counter .overlay
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
.counter-text
text-align:center;
.counter-text .num
display:block;
color:#ffffff;
font-size:34px;
font-weight:700;
.counter-text .name
display:block;
color:rgba(255,255,255,.9);
font-size:13px;
ul.social
padding:0;
ul.social li
display:inline-block;
.footer
color:rgba(255,255,255,.5);
.footer .heading
color:#ffffff;
font-size:20px;
.hidden
display:none;
.footer ul
margin:0;
padding:0;
.footer ul li
list-style:none;
margin-bottom:10px;
.footer ul li a
color:rgba(255,255,255,1);
@media screen and (max-width: 500px)
.icon
text-align:left;
@media screen and (max-width: 500px)
.text-services
padding-left:0;
padding-right:20px;
text-align:left;
</style></head>
<body style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center style="width:100%;background-color:#f1f1f1;">
<div style="display:none;font-size:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
</div>
<div style="max-width:600px;margin:0 auto;" class="email-container">
<!-- BEGIN BODY -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin:auto;">
<tr>
<td valign="top" class="bg_white" style="padding:1em 2.5em;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="logo" style="text-align:left;">
<h1>
<a href="https://moveandstore.com"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/beabaa6f-844f-4ffa-9080-6391df1c3ef6.png" style="max-width:200px" ></a>
</h1>
</td>
<td class="logo" style="text-align:right;">
<ul class="navigation">
<li>
<a href="tel:2056244537"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/ee34875d-ab9f-480d-a11e-150f8027462c.png" style="max-width:25px" ></a>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td valign="middle" class="hero bg_white" style="background-image:url('https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg');background-size:cover;height:400px;">
<table>
<tr>
<td>
<div class="text" style="text-align:center;">
<h2></h2>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="bg_dark email-section" style="text-align:center;">
<div class="heading-section heading-section-white">
<h2>We have a new website!</h2>
<p>We're so excited to unveil our new website! Our website is now easy to navigate to our services, get a quote, and schedule your move. We're excited to give our customers a new, top notch experience to make their move as easy as possible.</p>
<p><a href="https://moveandstore.com" class="btn btn-primary">visit the site</a>
</p>
</div>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>All New Service Pages</h2>
<p>We've redesigned and reinvented how deliver our services. We have a general breakdown of each service, plus a detailed service page for those of you who want to learn more specific details.</p>
</div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" >
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="padding-top:20px;padding-right:10px;">
<a href="https://moveandstore.com/services/residential"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6a5e0310-9a5a-4b52-8487-4702c8cf4fb3.png" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;"></a>
<div class="text-tour" style="text-align:center;">
<h3>
<a href="https://moveandstore.com/services/residential">Residential</a>
</h3>
<span class="price">Services include Local Moving, Long Distance and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<a href="https://moveandstore.com/services/collegiate"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/e5542099-d033-42ae-8f32-c9198cdc6e00.png" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;"></a>
<div class="text-tour" style="text-align:center;">
<h3>
<a href="https://moveandstore.com/services/collegiate">Collegiate</a>
</h3>
<span class="price">Services include Dorm Store, Lease Layover, Local Moving, and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<a href="https://moveandstore.com/services/commercial"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/22fec672-03f3-4285-a75c-9dc4e1ef78f3.png" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;"></a>
<div class="text-tour" style="text-align:center;">
<h3>
<a href="https://moveandstore.com/services/commercial">Commercial</a>
</h3>
<span class="price">Services include FF&E, Employee Relocation, Corporate Relocation, and Instutional Moving.</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- end:tr -->
<tr>
<td class="bg_white email-section" style="width:100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="middle" >
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6f23aa84-082e-4dba-9d2f-ca5c9fd414af.jpg" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
</td>
</tr>
</table>
</td>
<td valign="middle" >
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td class="text-services" style="text-align:left;padding-left:25px;">
<div class="heading-section">
<h3>Moving Tips</h3>
</div>
<div class="services-list">
<div class="text">
<h4>1. Pack up your things</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>2. Search for Destination</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>3. Be Responsible</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- Leave a Review -->
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>Leave us a Review!</h2>
<p>Had a good moving experience in the past? Please leave us a review on Google!</p>
<p><a href="#" class="btn btn-primary">Leave a Review</a>
</p>
</div>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
</table>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin:auto;">
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="text-align:left;padding-right:10px;">
<h3 class="heading">Follow Us</h3>
<p>Get the latest updates!</p>
<ul class="social">
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/31d75ed2-3027-49aa-b9f2-1969b2cb1f4b.png" style="width: 30px; padding-right:10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1f92f2b1-2e26-4add-acf8-b4f8c2056309.png" style="width: 30px; padding-right: 10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/63ede42c-5969-4eb5-8f64-5aa9add11cf6.png" style="width: 30px; max-width: 600px; height: auto; display: block;">
</li>
</ul>
</td>
</tr>
</table>
</td>
<td valign="top" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="text-align:left;padding-left:5px;padding-right:5px;">
<h3 class="heading">Contact Info</h3>
<ul>
<li>
<span class="text">130 Industrial Drive<br>Birmingham,AL 35211</span>
</li>
<li>
<span class="text"><a href="tel:2056244537">205-624-4537</a></span>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" >
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="text-align:left;padding-right:10px;">
<p>© 2019 Move & Store. All Rights Reserved.</p>
</td>
</tr>
</table>
</td>
<td valign="top" >
<table role="presentation" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="text-align:right;padding-left:5px;padding-right:5px;">
<p><a href="*|UNSUBSCRIBE|*" style="color:rgba(255,255,255,.4);">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
【问题讨论】：
【参考方案1】：我不确定为什么你的主图是背景图，但如果你把它做成普通图，主图就会显示在每个主要的电子邮件客户端，包括 Gmail 和 Yahoo。
试试这个：
<tr>
<td valign="middle" class="hero bg_white" style="">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg" />
</td>
</tr>
我把图片下方空的h2拉了出来，方便显示相关代码。
在我这样做之前，您的电子邮件英雄没有显示在 Outlook 2007-2019 中。即使将 hero 更改为 img，您在 Outlook 和其他客户端中仍会遇到严重问题。我建议进行更多测试和开发，以帮助确保您的客户看到您的信息。
祝你好运。
【讨论】：
是的，它最初有一个叠加层和一个标题，这就是为什么它是背景图像。我想我实际上已经发现电子邮件不喜欢 CSS，需要将所有样式放在代码本身中以上是关于电子邮件未格式化为 gmail的主要内容，如果未能解决你的问题，请参考以下文章