为什么gmail客户端（通过Chrome和Android应用程序）仍然从HTML电子邮件中删除标签？
我最近复习了这本书，然后给自己做了一个样本。我通过Mailchimp对其进行了测试，Mailchimp测试环境将其呈现为手机和桌面的预期效果，但当我向自己发送测试电子邮件时，我通过桌面上的Chrome浏览器使用gmail应用程序的gmail客户端和手机上的安卓应用程序似乎都去除了样式和链接标签，特别是剥离媒体屏幕大小查询和关联类，以及字体导入 声称gmail客户端现在接受标签，至少在大多数平台上是这样，包括我正在测试的两个平台。但是，如上所述，@media和@import查询不起作用。1我的代码有明显的问题吗？或者2这是Mailchimp的问题吗 HTML电子邮件代码，以及为什么gmail客户端（通过Chrome和Android应用程序）仍然从HTML电子邮件中删除标签？,gmail,media-queries,html-email,Gmail,Media Queries,Html Email,我最近复习了这本书，然后给自己做了一个样本。我通过Mailchimp对其进行了测试，Mailchimp测试环境将其呈现为手机和桌面的预期效果，但当我向自己发送测试电子邮件时，我通过桌面上的Chrome浏览器使用gmail应用程序的gmail客户端和手机上的安卓应用程序似乎都去除了样式和链接标签，特别是剥离媒体屏幕大小查询和关联类，以及字体导入 声称gmail客户端现在接受标签，至少在大多数平台上是这样，包括我正在测试的两个平台。但是，如上所述，@media和@import查询不起作用。1我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Happy Holidays!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico" rel="stylesheet">
<style type="text/css">
/* CLIENT-SPECIFIC STYLES ------------------- */
#outlook a {
padding: 0; /* Force Outlook to provide a "view in browser" message */
}
.ReadMsgBody {
width: 100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass {
width:100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; /* Force Hotmail to display normal line spacing */
}
body, table, td, a { /* Prevent WebKit and Windows mobile changing default text sizes */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table, td { /* Remove spacing between tables in Outlook 2007 and up */
mso-table-lspace: 0pt;
mso-table-rspace:0pt;
}
img { /* Allow smoother rendering of resized image in Internet Explorer */
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES --------------------------- */
body {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
a {
text-decoration: none;
}
/* iOS BLUE LINKS */
.apple-links a {
color: #A50001;
text-decoration: none;
}
/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico');
/* MOBILE STYLES ------------------------ */
@media only screen and (max-width: 600px) {
td[class="logo"] img {
margin: 0 auto !important;
}
table[class="wrapper"] {
width: 100% !important;
}
td[class="mobile-image-pad"] {
padding: 0 10px 0 10px !important;
}
td[class="mobile-title-pad"] {
padding: 10px 0px 0px 10px !important;
}
td[class="mobile-text-pad"] {
padding: 10px 10px 10px 10px !important;
}
td[class="mobile-column-right"] {
padding-top: 20px !important;
}
img[class="fluid-image"] {
width: 100% !important;
height: auto !important;
}
td[class="hide"] {
display: none !important;
}
td[class="mobile-button"] {
padding: 12px 60px 12px 60px !important;
}
td[class="mobile-button"] a {
font-size: 24px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;" >
<!-- CONTAINER TABLE (HEADER) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
<tr>
<td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">
<!-- HIDDEN PREHEADER -->
<div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
Preheader inbox text
</div>
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<!-- HEADER -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" background="img/url" alt="Bappy Bolidays!" width="100%" height="100" style="background-size:contain;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINER TABLE (HERO) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center" bgcolor="#C3D79C" style="padding: 20px 0 20px 0;">
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<!-- TWO COLUMNS -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="64%" align="left" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<img src="img/url" alt="Two Beautiful Peeps" width="384" height="288" border="0" style="display: block; image-orientation: from-image; color: #A50001; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; background-color: #339969; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="30%" align="right" class="wrapper">
<tr>
<td valign="middle" height="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="center" style="color: #339969; font-family: 'Cabin', sans-serif; font-weight: bold; font-size: 20px; line-height: 24px;" class="mobile-title-pad">
from
</td>
</tr>
<tr>
<td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#339969" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-button">
<a href="https://www.youtube.com/watch?v=08bLSIWGoSg#t=00m06s" target="_blank" style="font-size: 16px; font-family: 'Cabin', sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">let's go champ →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINER TABLE (VIGNETTES) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center" bgcolor="#fff2f9" style="padding: 40px 0 40px 0;">
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<!-- TWO COLUMNS (ROW 1) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="47%" align="left" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<a href="album/location" target="_blank">
<img src="img/url" alt="Kapanda" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad">
<a href="album/location" target="_blank" style="color: #589263; text-decoration: none;">description</a> more description!
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="47%" align="right" class="wrapper">
<tr>
<td class="mobile-column-right">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<a href="album/location" target="_blank">
<img src="url/img" alt="Hawaii Sunset" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; color: #339969; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad">
<a href="album/lcoation" target="_blank" style="color: #A50001; text-decoration: none;">Description</a> More description.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
这纯粹是猜测，但据我所知，谷歌已经完成了这一改变。因此，这些红色x可能在一段时间内不受支持。Gmail确实支持样式块，但不支持CSS中的选择器。移除选择器，CSS就会工作。例如，更改： td[类别=移动文本板] 致： td.mobile-text-pad
它应该会起作用。谢谢您的回复。我也看到了那个表格，但测试的客户是桌面webmail和Gmail Android应用程序Gmail帐户。@Kwhitejr我错过了关于web字体的部分，并更新了上面的答案。TL；DR:Gmail不支持网页字体我测试了你的电子邮件，确认它在Gmail iOS中没有响应，但可以将响应电子邮件发送到相同的电子邮件地址。我相信你的代码中有错误。很抱歉我知道这没有多大帮助，因为我自己没有时间调试它。不用担心！我可以不使用网页字体，但需要弄清楚为什么手机类不会被触发。谢谢你让我相信我没有疯：D