0

我的问题是，在 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>

4

1 回答 1

0

尝试通过其他方法发送。我正在使用 Litmus，它工作正常，或者只是尝试通过 mailjet 发送 - 我认为它应该可以工作并且它是免费的。

您的代码似乎是正确的（通过https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_form_mail检查）

于 2018-07-17T10:09:01.597 回答