【发布时间】：2018-03-08 16:42:55
【问题描述】：
我在工作中创建邮件模板。 我记得 Gmail 开始在“head”标签中支持 css 样式。 （规格：https://developers.google.com/gmail/design/css）
我试过了，很失望。我的信很大，因为有很多数据，Gmail 将其截断并显示链接以查看完整的信件（[消息剪辑] 查看整个消息）。我的 CSS 样式应用于标记。但是当我通过链接查看完整的字母时，我看不到样式 - 它们没有被应用。
问题截图
我需要帮助。我认为这是错误。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"/>
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
/*
====================================================
== [START] == Reset styles
====================================================
*/
#email_body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
color: #333;
line-height: 120%;
}
#email_body table, #email_body td, #email_body div, #email_body p, #email_body a {
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
#email_body table {
border-collapse: collapse;
border-spacing: 0;
}
#email_body table, #email_body td {
margin: 0;
padding: 0;
}
#email_body img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
#email_body p {
margin: 0;
}
#email_body strong, #email_body b {
font-weight: 700;
font-style: inherit;
}
#email_body i, #email_body em {
font-style: italic;
font-weight: inherit;
}
#email_body #outlook a {
padding: 0;
}
#email_body .ReadMsgBody, #email_body .ExternalClass {
width: 100%;
}
#email_body .ExternalClass, #email_body .ExternalClass p, #email_body .ExternalClass span, #email_body .ExternalClass font, #email_body .ExternalClass td, #email_body .ExternalClass div {
line-height: 100%;
}
/*
====================================================
== [START] == Hot Rules
====================================================
*/
#email_body .pb-5{padding-top: 5px !important;}
#email_body .pb-10{padding-top: 10px !important;}
#email_body .pt-10{padding-top: 10px !important;}
#email_body .fs-12{font-size:12px !important;}
#email_body .fs-16{font-size:16px !important;}
#email_body .fw-n{font-weight: 400 !important;}
#email_body .fw-b{font-weight: 700 !important;}
#email_body .wo-u{text-decoration: none !important;}
#email_body .t-regular{color:#333 !important;}
#email_body .t-additional{color: #999 !important;}
#email_body .t-red{color: #cc373c !important;}
/*Gmail anti-munged*/
.content_wrap table.anti-munged {
width: 100% !important;
}
/*
====================================================
== [START] == Skeleton
====================================================
*/
#email_body .content_wrap {
background-color: #fff;
color: #333;
font-family: Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
font-size: 14px;
line-height: 120%;
}
#email_body .content_wrap table,
#email_body .content_table {
font-family: Arial, Helvetica, sans-serif;
}
/*
====================================================
== [START] == Line Data Table
====================================================
*/
#email_body .blueHeader {
font-size: 16px;
color:#37809f;
font-weight: 700;
}
#email_body .lineDataTable {
border-bottom: 1px solid #ccc;
}
#email_body .lineDataTable.ldt-7-11 td {
padding: 7px 0 11px 10px;
}
#email_body .lineDataTable tr > td:first-child {
padding-left: 0;
}
#email_body .lineDataTable td {
border-top: 1px solid #ccc;
}
</style>
</head>
<body id="email_body">
<table class="content_wrap" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td align="center" valign="top" style="padding:20px 0;">
<table class="content_table" align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%;max-width:600px;" id="contentTable">
<tr class="applyExtraSpaceBefore">
<td align="left" valign="top" class="blueHeader pb-5 pt-10">
Top Movers
</td>
</tr>
<tr class="extraSpaceAfter-30">
<td align="left" valign="top" class="pb-10 fs-16">
<table align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;" class="lineDataTable ldt-7-11 anti-munged">
<tr>
<td align="left" valign="top">
<a href="#" target="_blank" class="wo-u t-regular">Stas (9123)</a>
</td>
<td align="left" valign="top" width="155" style="width:155px;">
<a href="#" target="_blank" class="wo-u fw-b t-red">100<br><span class="fs-12 fw-b t-additional">09/02/2017</span>
</a>
</td>
<td align="right" valign="top" width="70" style="width:70px;">
<a href="#" target="_blank" class="wo-u t-regular fw-b">
+900%<br><span class="fs-12 fw-n">Prior Value</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>为了实现Gmail截取邮件的情况——你可以在模板中添加任何数据（例如这个大数据表）http://img.mtrc.in/mkBi
【问题讨论】：
-
假设您的邮件模板不是“与规范中的完全相同”，您可以发布您的模板吗？猜猜它可能会有所帮助。
-
我添加了模板（html/css）的基础和数据中的第一个元素。 “全视图”不附加样式的问题
标签： css gmail html-email gmail-api incoming-mail