我已经为gmail报告编写了基本的HTML模板。当我在chrome浏览器中打开该模板时，该模板似乎显示“突出显示”，但在使用该模板发送电子邮件时却未显示。
这是代码：
<!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>
此处显示的是“突出显示”行，但在将其用作模板时缺少该行] [1]
这是在gmail上的外观： [如您所见，'突出显示'丢失并且间距已关闭] [2]
答案 0 :(得分：1)
看到完整的代码后，看来您正在使用伪选择器在CSS中实现单词HIGHLIGHTS。 Gmail客户端不支持CSS伪选择器。
请参阅Campaign Monitors Email CSS Support-这概述了哪些电子邮件客户端支持各种CSS。
我建议您手动在“精彩集锦”标题中手动编码（下面的代码段是一个示例）。
还要小心使用cellpadding标签上的<table>属性，因为它可能导致其他电子邮件客户端出现问题。我建议在Emails on Acid或Litmus上使用免费试用版，以便您可以查看电子邮件在所有电子邮件客户端上的呈现方式。
上一个答案的有用链接：
要了解更多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>