CSS样式在全屏字母界面Gmail中不起作用
[英]Css styles does not work in full view letter interface Gmail
问题描述
我在工作中创建邮件模板。 我记得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
1 个解决方案
解决方案1
0 2017-09-27 09:21:51
它不是错误，而是Gmail早前引入的一项功能（一种）。 发送给Gmail的任何电子邮件，如果其大小超过102kb，则会进行裁剪。 由于您的电子邮件正在裁剪，因此电子邮件大小必须大于102kb。 请尝试以下任一方法：
- 缩小CSS。 删除所有不需要的空格和换行符（只是不要破坏代码）
- 删除所有未使用的类
- 删除评论（如果您是唯一使用模板的评论）
- 尽可能减少表的数量。 如果可以使用2个表完成，则不要使用超过2个表。
您可以在此处了解更多信息。 如果您将代码发布到某个人中，那么它会为您提供修复问题的指导。
希望这是您想要的答案。
为什么GMail使用可报价打印的编码破坏带有最小化标记/ HTML的电子邮件的内联（CSS）样式？
[英]Why does GMail break inline (CSS) styles for an email with minified markup/HTML using quote-printable encoding?
在JavaScript中添加CSS styles时，加法赋值运算符是否起作用？
[英]Does the Addition Assignment Operator work when adding CSS styles in JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.