2017-09-27 8 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を超えるとクリッピングが発生すると、そのメールはGmailに送信されます。あなたの電子メールはクリッピングされているので、電子メールのサイズは102kb以上でなければなりません。次のいずれかを試してください:

  1. CSSを小さくしてください。すべての不要なスペースとラインブレイクを取り外します(単にコードを破るいけない)
  2. すべてのクラスを削除
  3. を使用していない(テンプレートを使用して一つだけある場合)コメントを削除し
  4. 限りテーブルの数を減らして可能。 2つのテーブルを使用するとできない場合は、2を超えて使用しないでください。

hereについて詳しく読むことができます。誰かにあなたのコードを投稿していたなら、あなたは物事を修正するためのポインタを与えていたでしょう。

あなたが探していた答えです。

+0

Gmaiがメールをクリッピングする理由を理解しています。私は自分のメールにたくさんのデータがあると書いていました。それは正常であり、それは大丈夫です。 私のCSSスタイルを「フルビューモード」に添付して忘れた理由=) スクリーンショットで見ると、私のスタイルは「プレビュー」に適用され、フルには適用されませんでしたビュー。私はそれが間違った振る舞いだと思うし、bodyタグが剥奪されているので、これはおそらく –

+0

の確認を見つけようとしていますか?あなたはそれについて考えましたか?あなたの電子メールの周りにテーブルを追加してIDをtdに追加し、IDがそれを修正するかどうかを確認します。 – Syfer

+0

構造にはidとclassがあります(変更はgmailの場合は正常です)http://joxi.ru/lbrRVafJGpj6r1?d=1 文書にはテンプレートのCSSルールが含まれていません –

関連する問題