HTML 模板未在 Gmail 上呈现
HTML template not getting rendered on gmail
我已经为 gmail 报告编写了一个基本的 HTML 模板。当我在 chrome 浏览器中打开它时，该模板似乎显示 'Highlights'，但使用该模板发送电子邮件时却不显示。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
hr {
border: none;
border-top: 3px solid #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
width:56%;
}
hr:after {
background: #fff;
content: 'HIGHLIGHTS';
padding: 0 4px;
position: relative;
top: -13px;
width:56%;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.table_data,.msg_text{
margin-top:3%;
margin-bottom:2%;
height: 5%;
width:56%;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.logo{
text-align: center;
margin-top: 3%;
margin-bottom: 0%;
}
.heading
{
font-size: 30px;
color: blue;
text-align: center;
margin-top:-2.5%;
}
table tr th
{
background-color:#8e89895c;
font-size: 18px;
height: 40px;
}
table tr td
{
text-align: center;
font-size: 18px;
height: 40px;
}
/* #current_data table tr:nth-child(even) {background: #cccccc73}
#current_data table tr:nth-child(odd) {background: #FFF}
*/
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
font-size: 16px;
}
hr {
border: none;
border-top: 3px solid #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
width:100%;
}
hr:after {
background: #fff;
content: 'HIGHLIGHTS';
padding: 0 4px;
position: relative;
top: -13px;
width:100%;
}
.table_data, .msg_text{
table-layout: fixed;
width:100% !important;
word-break: break-all;
}
.heading
{
font-size: 25px;
color: blue;
text-align: center;
margin-top:-2.5%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 right">
<div class="logo">
<img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/smallinsisivlogo.png" width="auto" height="auto"><br>
</div>
<div class="heading">
<p >Your Daily Digest</p>
</div>
<hr>
<table align="center" class="top_heading">
<tr><td><img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/right.png" width="35px" height="35px"></td><td>{{pass_count}} policies passed</td></tr>
<tr><td><img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/wrong.png" width="40px" height="40px"></td><td>{{failed_count}} policies failed</td></tr>
</table>
</div>
<div class="col-12" id="current_data">
<table align="center" class="table_data" border="1" cellpadding="2px" cellspacing="0px" style="border-color:black;border-collapse: inherit;">
<tr>
<th style="font-size: 20px;background-color: gray;" >Category</th>
<th style="font-size: 20px;background-color: gray;" >Description</th>
<th style="font-size: 20px;background-color: gray;" >Count</th>
<th style="font-size: 20px;background-color: gray;" >Severity</th>
<th style="font-size: 20px;background-color: gray;" >Resource Failed</th>
</tr >
{% for items in Sitem %}
<tr>
<td class = "c1">{{items.category_name}}</td>
<td class = "c2">{{items.description}}</td>
<td class = "c3">{{items.count}}</td>
<td class = "c4">{{items.severity}}</td>
<td class = "c5">{{items.resource}}</td>
</tr>
{% endfor %}
</table>
</div>
<table class="msg_text" cellpadding="2px" cellspacing="0px" align="center">
<tr>
<td colspan="5" style="text-align: left;font-size: 12px;"><p>Please visit us on <a .../</a> for more information.This is an auto-mailer.Please do not reply to this mail.<br> For any clarifications and support you can contact:<br>+919620</td>
</tr>
</table>
</div>
</body>
</html>
此处显示了 'Highlights' 行，但在将其用于模板时丢失了][1]
这是它在 gmail 上的样子：
[如您所见，缺少 'Highlights' 且间距已关闭][2]
看到您的完整代码后，您似乎正在使用伪选择器在 CSS 中实现单词 HIGHLIGHTS。 CSS Gmail 客户端不支持伪选择器。
请参阅 Campaign Monitors Email CSS Support - 这概述了哪些电子邮件客户端支持各种 CSS。
我建议您手动在 Highlights 的标题中手动编码（下面的代码片段是我如何操作的示例）。
还要小心使用 <table> 标签上的 cellpadding 属性，因为它可能会导致其他电子邮件客户端出现问题。我建议在 Emails on Acid or Litmus 上使用免费试用，以便您可以查看您的电子邮件在所有电子邮件客户端上的呈现方式。
一个有用的 link 来自我之前的回答：
有关 Gmail 的更多怪癖，请访问 Email on Acid Gmail Blog Article，它为您提供了可能导致您的问题的怪癖的完整列表。
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td height="24" width="40%" valign="top">
<table role="presentation" align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody>
<tr>
<td height="11" style="max-height: 11px; font-size: 0px; mso-line-height-rule:exactly; line-height: 11px; max-height: 11px; border-bottom: #000000 1px solid;">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table role="presentation" class="inner" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size:20px; line-height:26px; color:#222222; text-align: center;" class="body-text">
<p style="font-family: Helvetica, Arial, sans-serif; font-size:20px; line-height:26px; color:#000000; font-weight:bold; padding:0; margin:0;" class="body-text">
Highlights
</p>
</td>
</tr>
</table>
</td>
<td height="24" width="40%" valign="top">
<table role="presentation" align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody>
<tr>
<td height="11" style="max-height: 11px; font-size: 0px; mso-line-height-rule:exactly; line-height: 11px; max-height: 11px; border-bottom: #000000 1px solid;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
我已经为 gmail 报告编写了一个基本的 HTML 模板。当我在 chrome 浏览器中打开它时，该模板似乎显示 'Highlights'，但使用该模板发送电子邮件时却不显示。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
hr {
border: none;
border-top: 3px solid #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
width:56%;
}
hr:after {
background: #fff;
content: 'HIGHLIGHTS';
padding: 0 4px;
position: relative;
top: -13px;
width:56%;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.table_data,.msg_text{
margin-top:3%;
margin-bottom:2%;
height: 5%;
width:56%;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.logo{
text-align: center;
margin-top: 3%;
margin-bottom: 0%;
}
.heading
{
font-size: 30px;
color: blue;
text-align: center;
margin-top:-2.5%;
}
table tr th
{
background-color:#8e89895c;
font-size: 18px;
height: 40px;
}
table tr td
{
text-align: center;
font-size: 18px;
height: 40px;
}
/* #current_data table tr:nth-child(even) {background: #cccccc73}
#current_data table tr:nth-child(odd) {background: #FFF}
*/
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
font-size: 16px;
}
hr {
border: none;
border-top: 3px solid #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
width:100%;
}
hr:after {
background: #fff;
content: 'HIGHLIGHTS';
padding: 0 4px;
position: relative;
top: -13px;
width:100%;
}
.table_data, .msg_text{
table-layout: fixed;
width:100% !important;
word-break: break-all;
}
.heading
{
font-size: 25px;
color: blue;
text-align: center;
margin-top:-2.5%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 right">
<div class="logo">
<img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/smallinsisivlogo.png" width="auto" height="auto"><br>
</div>
<div class="heading">
<p >Your Daily Digest</p>
</div>
<hr>
<table align="center" class="top_heading">
<tr><td><img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/right.png" width="35px" height="35px"></td><td>{{pass_count}} policies passed</td></tr>
<tr><td><img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/wrong.png" width="40px" height="40px"></td><td>{{failed_count}} policies failed</td></tr>
</table>
</div>
<div class="col-12" id="current_data">
<table align="center" class="table_data" border="1" cellpadding="2px" cellspacing="0px" style="border-color:black;border-collapse: inherit;">
<tr>
<th style="font-size: 20px;background-color: gray;" >Category</th>
<th style="font-size: 20px;background-color: gray;" >Description</th>
<th style="font-size: 20px;background-color: gray;" >Count</th>
<th style="font-size: 20px;background-color: gray;" >Severity</th>
<th style="font-size: 20px;background-color: gray;" >Resource Failed</th>
</tr >
{% for items in Sitem %}
<tr>
<td class = "c1">{{items.category_name}}</td>
<td class = "c2">{{items.description}}</td>
<td class = "c3">{{items.count}}</td>
<td class = "c4">{{items.severity}}</td>
<td class = "c5">{{items.resource}}</td>
</tr>
{% endfor %}
</table>
</div>
<table class="msg_text" cellpadding="2px" cellspacing="0px" align="center">
<tr>
<td colspan="5" style="text-align: left;font-size: 12px;"><p>Please visit us on <a .../</a> for more information.This is an auto-mailer.Please do not reply to this mail.<br> For any clarifications and support you can contact:<br>+919620</td>
</tr>
</table>
</div>
</body>
</html>
此处显示了 'Highlights' 行，但在将其用于模板时丢失了][1]
这是它在 gmail 上的样子： [如您所见，缺少 'Highlights' 且间距已关闭][2]
看到您的完整代码后，您似乎正在使用伪选择器在 CSS 中实现单词 HIGHLIGHTS。 CSS Gmail 客户端不支持伪选择器。
请参阅 Campaign Monitors Email CSS Support - 这概述了哪些电子邮件客户端支持各种 CSS。
我建议您手动在 Highlights 的标题中手动编码（下面的代码片段是我如何操作的示例）。
还要小心使用 <table> 标签上的 cellpadding 属性，因为它可能会导致其他电子邮件客户端出现问题。我建议在 Emails on Acid or Litmus 上使用免费试用，以便您可以查看您的电子邮件在所有电子邮件客户端上的呈现方式。
一个有用的 link 来自我之前的回答：
有关 Gmail 的更多怪癖，请访问 Email on Acid Gmail Blog Article，它为您提供了可能导致您的问题的怪癖的完整列表。
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td height="24" width="40%" valign="top">
<table role="presentation" align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody>
<tr>
<td height="11" style="max-height: 11px; font-size: 0px; mso-line-height-rule:exactly; line-height: 11px; max-height: 11px; border-bottom: #000000 1px solid;">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table role="presentation" class="inner" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size:20px; line-height:26px; color:#222222; text-align: center;" class="body-text">
<p style="font-family: Helvetica, Arial, sans-serif; font-size:20px; line-height:26px; color:#000000; font-weight:bold; padding:0; margin:0;" class="body-text">
Highlights
</p>
</td>
</tr>
</table>
</td>
<td height="24" width="40%" valign="top">
<table role="presentation" align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody>
<tr>
<td height="11" style="max-height: 11px; font-size: 0px; mso-line-height-rule:exactly; line-height: 11px; max-height: 11px; border-bottom: #000000 1px solid;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>