2017-09-27 56 views
0

我在作业中创建邮件模板。 我记得Gmail开始在'head'标签中支持css样式。 (规格:https://developers.google.com/gmail/design/cssCss风格在全视图字母界面中不起作用Gmail

我试过了,很失望。我的信很重要,因为有很多数据,Gmail会将其切断并显示链接以查看完整的信件([信息剪辑]查看整个信息)。我的CSS风格被应用于标记。但是当我通过链接查看完整的信件时,我看不到样式 - 它们不适用。

的问题

enter image description here

截图我需要帮助。我认为这是错误。

<!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

+0

假设你的邮件模板不是“与规范完全一样”,你可以发布你的模板吗?猜猜它可能有帮助。 – Nikolas

+0

我添加了模板(html/css)的基础和数据的第一个元素。 “全视图”不附风格的问题 –

回答

0

它不是一个错误,它的功能(某种),Gmail早些时候介绍过的。发送到Gmail的任何电子邮件,如果其大小超过102kb,将会发生。由于您的电子邮件正在裁剪,电子邮件大小必须高于102kb。尝试以下任何一种:

  1. 缩小您的CSS。删除所有不必要的空格和线中断(只是不破坏代码)
  2. 删除未使用
  3. 删除注释的所有类(如果你使用模板唯一的一个)
  4. 减少表的数量一样多可能。如果可以使用2个表格完成,则不要超过2个。

您可以阅读更多关于它的信息here。如果你将代码发布给某人会给你指针来解决问题。

希望这是你正在寻找的答案。

+0

我明白为什么Gmai会剪裁我的电子邮件。我写道,我的电子邮件有很多数据。这很正常,没关系。 我不喜欢,我不明白为什么Gmail忘记将我的CSS样式添加到“全视图模式”=) 如何在截图中看到我的样式已应用于“预览”中,但未应用于完整视图。我认为这是错误的行为,我试图找到这个 –

+0

的确认,也许是因为身体标签被剥离?你有想过吗?在你的电子邮件中添加一个表格,并将该ID添加到td中,并查看是否修复了该问题。 – Syfer

+0

结构具有所有属性id和类的一些修改(修改 - 这是正常的gmail)http://joxi.ru/lbrRVafJGpj6r1?d=1 但文档不包含我的模板的css规则 –