Шаблон письма меняется после отправки

моя проблема в том, что после отправки шаблона почты/сохранения шаблона в chrome, например. для себя, когда я открываю его, он выглядит хорошо, но через несколько секунд кажется, что он теряет некоторые css (в данном конкретном случае он теряет границы в нижней таблице).

Вот код, он был написан на MJML

Что странно, если я отправлю этот шаблон не через gmail, он будет хорошо выглядеть даже в gmail

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>

  </title>
  <!--[if !mso]> -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass * {
      line-height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if !mso]><!-->
  <style type="text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport {
        width: 320px;
      }
      @viewport {
        width: 320px;
      }
    }
  </style>
  <!--<![endif]-->
  <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->

  <!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
  </style>
  <!--<![endif]-->



  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
      }
      .mj-column-px-300 {
        width: 300px !important;
      }
      .mj-column-per-50 {
        width: 50% !important;
      }
    }
  </style>


  <style type="text/css">
  </style>

</head>

<body>


  <div>

    <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">

      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">

        <tr>
          <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">

            <div style="font-family:verdana;font-size:20px;line-height:1;text-align:center;color:black;">
              Tytul
            </div>

          </td>
        </tr>

        <tr>
          <td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">

            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
              <tbody>
                <tr>
                  <td>


                    <!--[if mso | IE]>
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
      >
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->


                    <div style="Margin:0px auto;max-width:600px;">

                      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                        <tbody>
                          <tr>
                            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                              <!--[if mso | IE]>
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">

        <tr>

            <td
               style="vertical-align:top;width:300px;"
            >
          <![endif]-->

                              <div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">

                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">

                                  <tr>
                                    <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">

                                      <table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
                                        <tr style="text-align: left;">
                                          <th>
                                            <h3>Desktop</h3>
                                          </th>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <th style="padding: 5px;">TAG</th>
                                          <th style="padding: 5px;">STATUS</th>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Homepage</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">Category</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Search</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">Offer</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Basket</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">StartOrder</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Confirmation</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">Placebo</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr>
                                          <td>
                                            &nbsp;
                                          </td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td>Comment:</td>
                                          <td></td>
                                        </tr>
                                        <tr>
                                          <td>Comment here</td>
                                        </tr>
                                      </table>

                                    </td>
                                  </tr>

                                </table>

                              </div>

                              <!--[if mso | IE]>
            </td>

            <td
               style="vertical-align:top;width:300px;"
            >
          <![endif]-->

                              <div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">

                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">

                                  <tr>
                                    <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">

                                      <table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
                                        <tr style="text-align: left;">
                                          <th>
                                            <h3>Mobile</h3>
                                          </th>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <th style="padding: 5px;">TAG</th>
                                          <th style="padding: 5px;">STATUS</th>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Homepage</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">Category</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Search</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">Offer</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Basket</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">StartOrder</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td style="padding: 5px;">Confirmation</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr style="text-align: left;">
                                          <td style="padding: 5px;">Placebo</td>
                                          <td style="padding: 5px;">OK</td>
                                        </tr>
                                        <tr>
                                          <td>
                                            &nbsp;
                                          </td>
                                        </tr>
                                        <tr style="text-align: left; background-color: #e0ecff;">
                                          <td>Comment:</td>
                                          <td></td>
                                        </tr>
                                        <tr>
                                          <td>Comment here</td>
                                        </tr>
                                      </table>

                                    </td>
                                  </tr>

                                </table>

                              </div>

                              <!--[if mso | IE]>
            </td>

        </tr>

                  </table>
                <![endif]-->
                            </td>
                          </tr>
                        </tbody>
                      </table>

                    </div>


                    <!--[if mso | IE]>
          </td>
        </tr>
      </table>
      <![endif]-->


                  </td>
                </tr>
              </tbody>
            </table>

          </td>
        </tr>

        <tr>
          <td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">


            <!--[if mso | IE]>
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
      >
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->


            <div style="Margin:0px auto;max-width:600px;">

              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                <tbody>
                  <tr>
                    <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                      <!--[if mso | IE]>
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">

        <tr>

            <td
               style="vertical-align:top;width:300px;"
            >
          <![endif]-->

                      <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">

                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">

                          <tr>
                            <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">

                              <table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
                                <tr style="text-align: left; border-bottom: 1px solid black;">
                                  <td style="padding: 5px; width: 82px;">Rate card:</td>
                                  <td style="padding: 5px;">RC here</td>
                                </tr>
                                <tr style="text-align: left;">
                                  <td style="padding: 5px; width: 82px; ">Budget:</td>
                                  <td style="padding: 5px;">text</td>
                                </tr>
                              </table>

                            </td>
                          </tr>

                        </table>

                      </div>

                      <!--[if mso | IE]>
            </td>

            <td
               style="vertical-align:top;width:300px;"
            >
          <![endif]-->

                      <div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">

                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">

                          <tr>
                            <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">

                              <table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
                                <tr style="text-align: left; border-bottom: 1px solid black;">
                                  <td style="padding: 5px; width: 82px;">Optimization:</td>
                                  <td style="padding: 5px;">text</td>
                                </tr>
                                <tr style="text-align: left;">
                                  <td style="padding: 5px; width: 82px;">Banners:</td>
                                  <td style="padding: 5px;">text</td>
                                </tr>
                              </table>

                            </td>
                          </tr>

                        </table>

                      </div>

                      <!--[if mso | IE]>
            </td>

        </tr>

                  </table>
                <![endif]-->
                    </td>
                  </tr>
                </tbody>
              </table>

            </div>


            <!--[if mso | IE]>
          </td>
        </tr>
      </table>
      <![endif]-->


          </td>
        </tr>

      </table>

    </div>

  </div>

</body>

</html>

PWalker 12.07.2018 источник

comment

что ты имеешь в виду под looks like it is loosing some css? - Syfer 13.07.2018

comment

Если вы прошли это, было бы здорово, если бы вы рассказали нам, что сработало для вас. Если вы прошли это из-за ответа kozanostra1907, возможно, нажмите «Принять ответ», что поможет ему и всем остальным. Если вы не прошли через это, Сайфер задал правильный вопрос. - BaldEagle 16.08.2018

Ответы (1)

arrow_upward
0
arrow_downward

Попробуйте отправить другим способом. Я использую Litmus, он работает нормально, или просто попробуйте отправить через mailjet - я думаю, он тоже должен работать, и это бесплатно.

Ваш код кажется правильным (проверено через https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_form_mail )

kozanostra1907 17.07.2018

comment

Как вы думаете, это может вызвать эту проблему? github.com/mjmlio/mjml/issues/1280 - PWalker; 18.07.2018

comment

@PWalder: конец этого билета указывает на то, что ошибка GMail была исправлена незадолго до вашего вопроса. Так что, возможно, сейчас важно то, прошли ли вы это. - BaldEagle; 16.08.2018

Шаблон письма меняется после отправки

Ответы (1)

Похожие вопросы