0
Je crée un modèle de courrier dans mon travail. Je me souviens que Gmail a commencé à prendre en charge les styles css dans la balise 'head'. (spec .: https://developers.google.com/gmail/design/css)Les styles Css ne fonctionnent pas dans une interface de lettre pleine vue Gmail
J'ai essayé et j'ai été déçu. Ma lettre est grande car il y a beaucoup de données et Gmail l'a coupé et montré le lien pour voir la lettre complète ([Message coupé] Voir le message entier). Mon style CSS a été appliqué au balisage. Mais quand je regarde la lettre complète par lien, je ne vois pas les styles - ils ne sont pas appliqués.
Capture d'écran de problème
je besoin d'aide. Je pense que c'est 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>Pour obtenir la situation lorsque Gmail écrête mail - vous pouvez ajouter dans modèle de données (par exemple, cette grande table de données) http://img.mtrc.in/mkBi
En supposant que votre modèle de courrier n'est pas "exactement le même que dans la spécification", pourriez-vous poster votre modèle? Je suppose que ça pourrait aider. – Nikolas
J'ai ajouté la fondation du modèle (html/css) et le premier élément à partir des données. Problème que 'full view' n'attache pas les styles –