0
내 작업에 메일 템플릿을 만듭니다. Gmail이 'head'태그에 CSS 스타일 지원을 시작했음을 기억합니다. (규격 : https://developers.google.com/gmail/design/css)전체보기 문자 인터페이스에서 CSS 스타일이 작동하지 않습니다. Gmail
나는 그것을 시험해 실망했다. 내 편지는 많은 양의 데이터가 있고 Gmail이 그것을 잘라 버리고 전체 글자를 볼 수있는 링크를 보여주기 때문에 커졌습니다 ([Message clipped] 전체 메시지보기). 내 CSS 스타일이 마크 업에 적용되었습니다. 그러나 링크로 전체 편지를 볼 때 스타일이 보이지 않습니다. 적용되지 않습니다.
문제
의스크린 샷 나는 도움이 필요합니다. 나는 그것이 벌레라고 생각한다.
용 Gmail 메일을 클리핑 할 때 상황을 달성
<!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>
메일 템플릿이 "사양과 정확히 일치하지"않는다고 가정하면 템플릿을 게시 할 수 있습니까? 그것이 도움이 될 것 같아요. – Nikolas
템플릿 (html/css)의 기초와 데이터에서 첫 번째 요소를 추가했습니다. '전체보기'가 스타일을 첨부하지 않는 문제 –