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.