CSS样式在全屏字母界面Gmail中不起作用
[英]Css styles does not work in full view letter interface Gmail
问题描述
I create mail template in my job. 
我在工作中创建邮件模板。 I remember that Gmail started support css styles in 'head' tag. 我记得Gmail在'head'标记中开始支持CSS样式。 (spec.: https://developers.google.com/gmail/design/css ) （规格： https ： //developers.google.com/gmail/design/css ）
I tried it and was disappointed. 我尝试过，很失望。 My letter is big because has a lot of data and Gmail cut off it and shown link for see full letter ([Message clipped] View entire message). 我的信件很大，因为其中包含大量数据，Gmail切断了该信件，并显示了链接以查看完整的信件（[邮件已剪辑]查看整个邮件）。 My css style was applied to markup. 我的CSS样式已应用于标记。 But when I look at full letter by link I do not see styles - they are not applied. 但是，当我通过链接查看完整的字母时，看不到样式-它们未应用。
Screenshot of problem 问题截图
I need help. 我需要帮助。 I think it's bug. 我认为是错误。
<!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>
For achieve situation when Gmail is clipping mail - you can add into template any data (for example this big data table) http://img.mtrc.in/mkBi 为了实现Gmail剪切邮件时的实现效果-您可以在模板中添加任何数据（例如此大数据表） http://img.mtrc.in/mkBi
1 个解决方案
解决方案1
0 2017-09-27 09:21:51
Its not a bug, its a feature (sort of) that Gmail had introduced some time ago. 它不是错误，而是Gmail早前引入的一项功能（一种）。 Any email sent to Gmail if its above 102kb in size the clipping will occur. 发送给Gmail的任何电子邮件，如果其大小超过102kb，则会进行裁剪。 Since your emails are clipping the email size must be above 102kb. 由于您的电子邮件正在裁剪，因此电子邮件大小必须大于102kb。 Try any of the following: 请尝试以下任一方法：
- Minify your CSS. 缩小CSS。 Remove all unwanted spaces and lines breaks (just dont break the code) 删除所有不需要的空格和换行符（只是不要破坏代码）
- Remove all classes not being used 删除所有未使用的类
- Remove comments (if you are the only one using the template) 删除评论（如果您是唯一使用模板的评论）
- Reduce the number of tables as much as possible. 尽可能减少表的数量。 if it can be done using 2 tables dont use more than 2. 如果可以使用2个表完成，则不要使用超过2个表。
You can read more about it here . 您可以在此处了解更多信息。 if you had posted your code in someone would have given you pointers in fixing things. 如果您将代码发布到某个人中，那么它会为您提供修复问题的指导。
Hope that is the answer you were looking for. 希望这是您想要的答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.