HTML-шаблон не отображается в Gmail - PullRequest
Новая
       37

HTML-шаблон не отображается в Gmail

0 голосов
/ 05 ноября 2018

Я написал базовый шаблон HTML для отчета Gmail. Кажется, что шаблон отображает «Основные моменты», когда я открываю его в браузере Chrome, но он не отображается при использовании шаблона для отправки электронных писем.

Вот код: 

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        * {
            box-sizing: border-box;
        }
        .row::after {
            content: "";
            clear: both;
            display: block;
        }
        hr {
            border: none;
            border-top: 3px solid #333;
            color: #333;
            overflow: visible;
            text-align: center;
            height: 5px;
            width:56%;
        }

        hr:after {
            background: #fff;
            content: 'HIGHLIGHTS';
            padding: 0 4px;
            position: relative;
            top: -13px;
            width:56%;
        }
        html {
            font-family: "Lucida Sans", sans-serif;
        }

        .table_data,.msg_text{
            margin-top:3%;
            margin-bottom:2%;
            height: 5%;
            width:56%;
        }
        .aside {
            background-color: #33b5e5;
            padding: 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .logo{
            text-align: center;
            margin-top: 3%;
            margin-bottom: 0%;
            }

        .heading
        {
            font-size: 30px;
            color: blue;
            text-align: center; 
            margin-top:-2.5%; 

        }
        table tr th
        {
            background-color:#8e89895c;
            font-size: 18px;
            height: 40px;
        }
        table tr td
        {
            text-align: center;
            font-size: 18px;
            height: 40px;

        }
        /* #current_data table tr:nth-child(even) {background: #cccccc73}
        #current_data table tr:nth-child(odd) {background: #FFF}
         */


        @media only screen and (max-width: 768px) {
            /* For mobile phones: */
            [class*="col-"] {
                width: 100%;
                font-size: 16px;
            }
            hr {
            border: none;
            border-top: 3px solid #333;
            color: #333;
            overflow: visible;
            text-align: center;
            height: 5px;
            width:100%;
            }

            hr:after {
                background: #fff;
                content: 'HIGHLIGHTS';
                padding: 0 4px;
                position: relative;
                top: -13px;
                width:100%;

            }
            .table_data, .msg_text{
                table-layout: fixed;
                width:100% !important;
                word-break: break-all;
            }
            .heading
            {
                font-size: 25px;
                color: blue;
               text-align: center;
               margin-top:-2.5%; 

            }

        }

    </style>
    </head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 right">
            <div class="logo">
                <img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/smallinsisivlogo.png" width="auto" height="auto"><br>
            </div>
            <div class="heading">
                <p >Your Daily Digest</p> 
            </div>
            <hr>
            <table align="center" class="top_heading">
                <tr><td><img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/right.png" width="35px" height="35px"></td><td>{{pass_count}} policies passed</td></tr>
                <tr><td><img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/wrong.png" width="40px" height="40px"></td><td>{{failed_count}} policies failed</td></tr>
            </table>
        </div>
        <div class="col-12" id="current_data">
            <table align="center" class="table_data" border="1" cellpadding="2px" cellspacing="0px" style="border-color:black;border-collapse: inherit;">
               <tr>
                                    <th   style="font-size: 20px;background-color: gray;" >Category</th>
                                    <th   style="font-size: 20px;background-color: gray;" >Description</th>
                                    <th   style="font-size: 20px;background-color: gray;" >Count</th>
                                    <th   style="font-size: 20px;background-color: gray;" >Severity</th>
                                    <th   style="font-size: 20px;background-color: gray;" >Resource Failed</th>
                </tr >
                                        {% for items in Sitem %}
                                            <tr>
                                            <td class = "c1">{{items.category_name}}</td>
                                            <td class = "c2">{{items.description}}</td>
                                            <td class = "c3">{{items.count}}</td>
                                            <td class = "c4">{{items.severity}}</td>
                                            <td class = "c5">{{items.resource}}</td>
                                            </tr>
                                        {% endfor %}
            </table>
        </div>                   
        <table class="msg_text" cellpadding="2px" cellspacing="0px" align="center">        
            <tr>
                <td colspan="5" style="text-align: left;font-size: 12px;"><p>Please visit us on <a .../</a> for more information.This is an auto-mailer.Please do not reply to this mail.<br> For any clarifications and support you can contact:<br>+919620</td>
            </tr>
        </table>

    </div>                 
</body>
</html>

Здесь отображается строка «Основные моменты», но она отсутствует при использовании ее для шаблона] [1]

Вот как это выглядит в gmail: [Как вы можете видеть, «Highlights» отсутствует и интервал выключен] [2]

1 Ответ

0 голосов
/ 05 ноября 2018

После просмотра вашего полного кода кажется, что вы реализуете слово HIGHLIGHTS в своем CSS, используя псевдоселектор. CSS псевдо-селекторы не поддерживаются клиентами Gmail.

См. Мониторинг кампании. Поддержка CSS по электронной почте. - это обзор того, какие почтовые клиенты поддерживают различные CSS.

Я бы порекомендовал вам вручную написать код в заголовке «Основные моменты» (пример того, как я бы это сделал, приведен во фрагменте ниже).

Также будьте осторожны при использовании атрибута cellpadding в тегах <table>, так как это может вызвать проблемы в других почтовых клиентах. Я бы предложил использовать бесплатную пробную версию для электронных писем на Acid или Litmus , чтобы вы могли видеть, как ваша электронная почта отображается на всех почтовых клиентах.

Полезная ссылка из моего предыдущего ответа:

Для получения дополнительной информации о причудах Gmail посетите Электронная почта на статье Acid Gmail Blog , в которой приведен полный список причуд, которые могут быть причиной вашей проблемы. 

<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
	<td height="24" width="40%" valign="top">
		<table role="presentation" align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;">
		<tbody>
		<tr>
			<td height="11" style="max-height: 11px; font-size: 0px; mso-line-height-rule:exactly; line-height: 11px; max-height: 11px; border-bottom: #000000 1px solid;">
				 &nbsp;
			</td>
		</tr>
		</tbody>
		</table>
	</td>
	<td>
		<table role="presentation" class="inner" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size:20px; line-height:26px; color:#222222; text-align: center;" class="body-text">
				<p style="font-family: Helvetica, Arial, sans-serif; font-size:20px; line-height:26px; color:#000000; font-weight:bold; padding:0; margin:0;" class="body-text">
					 Highlights
				</p>
			</td>
		</tr>
		</table>
	</td>
	<td height="24" width="40%" valign="top">
		<table role="presentation" align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;">
		<tbody>
		<tr>
			<td height="11" style="max-height: 11px; font-size: 0px; mso-line-height-rule:exactly; line-height: 11px; max-height: 11px; border-bottom: #000000 1px solid;">
				&nbsp;
			</td>
		</tr>
		</tbody>
		</table>
	</td>
</tr>
</table>
...