电子邮件不是 gmail 的格式

Email not formatting for gmail

How it shows in Gmail
How it shows in Yahoo
Accurate Design

我一直遇到电子邮件在某些平台上格式不正确的问题。它似乎删除了雅虎中的图像和背景颜色,并把 Gmail 中的一切都搞砸了。苹果它完全没问题。

我对代码不是很了解,我只能进行更改,但不确定要添加或更改什么才能与所有平台兼容。我认为这与背景颜色和图片的编码方式有关。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width">
    <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">
    <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title></title>
    <!-- The title tag shows in email notifications, like Android 4.4. -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
    <!-- CSS Reset : BEGIN -->
    <!-- CSS Reset : END -->
    <!-- Progressive Enhancements : BEGIN -->

  <style type="text/css">
        html,body{
            margin:0 auto !important;
            padding:0 !important;
            height:100% !important;
            width:100% !important;
            background:#f1f1f1;
        }
        *{
            -ms-text-size-adjust:100%;
            -webkit-text-size-adjust:100%;
        }
        div[style*=margin: 16px 0]{
            margin:0 !important;
        }
        table,td{
            mso-table-lspace:0 !important;
            mso-table-rspace:0 !important;
        }
        table{
            border-spacing:0 !important;
            border-collapse:collapse !important;
            table-layout:fixed !important;
            margin:0 auto !important;
        }
        img{
            -ms-interpolation-mode:bicubic;
        }
        a{
            text-decoration:none;
        }
        [x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
            border-bottom:0 !important;
            cursor:default !important;
            color:inherit !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
        }
        .a6S{
            display:none !important;
            opacity:.01 !important;
        }
        .im{
            color:inherit !important;
        }
        img.g-img+div{
            display:none !important;
        }
    @media only screen and (min-device-width: 320px) and (max-device-width: 374px){
        u ~ div .email-container{
            min-width:320px !important;
        }

}   @media only screen and (min-device-width: 375px) and (max-device-width: 413px){
        u ~ div .email-container{
            min-width:375px !important;
        }

}   @media only screen and (min-device-width: 414px){
        u ~ div .email-container{
            min-width:414px !important;
        }

}       html,body{
            margin:0 auto !important;
            padding:0 !important;
            height:100% !important;
            width:100% !important;
            background:#f1f1f1;
        }
        *{
            -ms-text-size-adjust:100%;
            -webkit-text-size-adjust:100%;
        }
        div[style*=margin: 16px 0]{
            margin:0 !important;
        }
        table,td{
            mso-table-lspace:0 !important;
            mso-table-rspace:0 !important;
        }
        table{
            border-spacing:0 !important;
            border-collapse:collapse !important;
            table-layout:fixed !important;
            margin:0 auto !important;
        }
        img{
            -ms-interpolation-mode:bicubic;
        }
        a{
            text-decoration:none;
        }
        [x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
            border-bottom:0 !important;
            cursor:default !important;
            color:inherit !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
        }
        .a6S{
            display:none !important;
            opacity:.01 !important;
        }
        .im{
            color:inherit !important;
        }
        img.g-img+div{
            display:none !important;
        }
    @media only screen and (min-device-width: 320px) and (max-device-width: 374px){
        u ~ div .email-container{
            min-width:320px !important;
        }

}   @media only screen and (min-device-width: 375px) and (max-device-width: 413px){
        u ~ div .email-container{
            min-width:375px !important;
        }

}   @media only screen and (min-device-width: 414px){
        u ~ div .email-container{
            min-width:414px !important;
        }

}       .primary{
            background:#f5564e;
        }
        .bg_white{
            background:#ffffff;
        }
        .bg_light{
            background:#fafafa;
        }
        .bg_black{
            background:#000000;
        }
        .bg_dark{
            background:rgba(0,0,0,.8);
        }
        .email-section{
            padding:2.5em;
        }
        .btn{
            padding:12px 20px;
            display:inline-block;
            text-transform:uppercase;
            letter-spacing:2px;
            font-weight:600;
        }
        .btn.btn-primary{
            border-radius:30px;
            background:#36b1ce;
            font-size:13px;
            color:#ffffff;
        }
        .btn.btn-white{
            border-radius:5px;
            background:#ffffff;
            color:#000000;
        }
        .btn.btn-white-outline{
            border-radius:5px;
            background:transparent;
            border:1px solid #fff;
            color:#fff;
        }
        h1,h2,h3,h4,h5,h6{
            font-family:'Raleway',sans-serif;
            color:#000000;
            margin-top:0;
        }
        body{
            font-family:'Raleway',sans-serif;
            font-weight:400;
            font-size:15px;
            line-height:1.8;
            color:rgba(0,0,0,.4);
        }
        a{
            color:#f5564e;
        }
        .logo h1{
            margin:0;
        }
        .logo h1 a{
            color:#000;
            font-size:20px;
            font-weight:700;
            text-transform:uppercase;
            font-family:'Raleway',sans-serif;
        }
        .navigation{
            padding:0;
        }
        .navigation li{
            list-style:none;
            display:inline-block;
            margin-left:5px;
            font-size:12px;
            font-weight:700;
            text-transform:uppercase;
        }
        .navigation li a{
            color:rgba(0,0,0,.6);
        }
        .hero{
            position:relative;
            z-index:0;
        }
        .hero .overlay{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            content:'';
            width:100%;
            background:#000000;
            z-index:-1;
            opacity:.3;
        }
        .hero .icon a{
            display:block;
            width:60px;
            margin:0 auto;
        }
        .hero .text{
            color:rgba(255,255,255,.8);
            padding:0 4em;
        }
        .hero .text h2{
            color:#ffffff;
            font-size:40px;
            margin-bottom:0;
            line-height:1.2;
            font-weight:300;
        }
        .heading-section h2{
            color:#000000;
            font-size:30px;
            margin-top:0;
            line-height:1.4;
            font-weight:300;
        }
        .heading-section .subheading{
            margin-bottom:20px !important;
            display:inline-block;
            font-size:13px;
            text-transform:uppercase;
            letter-spacing:2px;
            color:rgba(0,0,0,.4);
            position:relative;
        }
        .heading-section .subheading::after{
            position:absolute;
            left:0;
            right:0;
            bottom:-10px;
            content:'';
            width:100%;
            height:2px;
            background:#f5564e;
            margin:0 auto;
        }
        .heading-section-white{
            color:rgba(255,255,255,.8);
        }
        .heading-section-white h2{
            line-height:1;
            font-weight:300;
            font-size:30px;
            padding-bottom:0;
        }
        .heading-section-white h2{
            color:#ffffff;
        }
        .heading-section-white .subheading{
            margin-bottom:0;
            display:inline-block;
            font-size:30px;
            text-transform:uppercase;
            letter-spacing:2px;
            font-weight:300;
            color:rgba(255,255,255,.4);
        }
        .icon{
            text-align:center;
        }
        .services{
            background:rgba(0,0,0,.03);
        }
        .text-services{
            padding:20px 10px 0;
            text-align:center;
            background:#fafafa;
        }
        .text-services h4{
            font-size:15px;
            text-transform:uppercase;
            letter-spacing:.5px;
            color:#36b1ce;
            font-weight:600;
        }
        .services-list{
            padding:0;
            margin:0 0 10px;
            width:100%;
            float:left;
        }
        .services-list .text{
            width:100%;
            float:right;
        }
        .services-list h3{
            margin-top:0;
            margin-bottom:0;
            font-size:15px;
        }
        .services-list p{
            margin:0;
        }
        .text-tour{
            padding-top:10px;
        }
        .text-tour h3{
            margin-bottom:0;
        }
        .text-tour h3 a{
            color:#000;
        }
        .text-services .meta{
            text-transform:uppercase;
            font-size:14px;
        }
        .text-testimony .name{
            margin:0;
        }
        .text-testimony .position{
            color:rgba(0,0,0,.3);
        }
        .counter{
            width:100%;
            position:relative;
            z-index:0;
        }
        .counter .overlay{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            content:'';
            width:100%;
            background:#000000;
            z-index:-1;
            opacity:.3;
        }
        .counter-text{
            text-align:center;
        }
        .counter-text .num{
            display:block;
            color:#ffffff;
            font-size:34px;
            font-weight:700;
        }
        .counter-text .name{
            display:block;
            color:rgba(255,255,255,.9);
            font-size:13px;
        }
        ul.social{
            padding:0;
        }
        ul.social li{
            display:inline-block;
        }
        .footer{
            color:rgba(255,255,255,.5);
        }
        .footer .heading{
            color:#ffffff;
            font-size:20px;
        }
        .hidden{
            display:none;
        }
        .footer ul{
            margin:0;
            padding:0;
        }
        .footer ul li{
            list-style:none;
            margin-bottom:10px;
        }
        .footer ul li a{
            color:rgba(255,255,255,1);
        }
    @media screen and (max-width: 500px){
        .icon{
            text-align:left;
        }

}   @media screen and (max-width: 500px){
        .text-services{
            padding-left:0;
            padding-right:20px;
            text-align:left;
        }

}</style></head>
  <body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
    <center style="width:100%;background-color:#f1f1f1;">
      <div style="display:none;font-size:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
        ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
      </div>
      <div style="max-width:600px;margin:0 auto;" class="email-container">
        <!-- BEGIN BODY -->
        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
          <tr>
            <td valign="top" class="bg_white" style="padding:1em 2.5em;">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td width="40%" class="logo" style="text-align:left;">
                    <h1>
                      <a href="https://moveandstore.com"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/beabaa6f-844f-4ffa-9080-6391df1c3ef6.png" style="max-width:200px" alt="beabaa6f-844f-4ffa-9080-6391df1c3ef6.png"></a>
                    </h1>
                  </td>
                  <td width="60%" class="logo" style="text-align:right;">
                    <ul class="navigation">
                      <li>
                        <a href="tel:2056244537"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/ee34875d-ab9f-480d-a11e-150f8027462c.png" style="max-width:25px" alt="ee34875d-ab9f-480d-a11e-150f8027462c.png"></a>
                      </li>
                    </ul>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- end tr -->
          <tr>
            <td valign="middle" class="hero bg_white" style="background-image:url('https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg');background-size:cover;height:400px;">

              <table>
                <tr>
                  <td>
                    <div class="text" style="text-align:center;">
                      <h2></h2>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- end tr -->
          <tr>
            <td class="bg_dark email-section" style="text-align:center;">
              <div class="heading-section heading-section-white">
                <h2>We have a new website!</h2>
                <p>We're so excited to unveil our new website! Our website is now easy to navigate to our services, get a quote, and schedule your move. We're excited to give our customers a new, top notch experience to make their move as easy as possible.</p>
                <p><a href="https://moveandstore.com" class="btn btn-primary">visit the site</a>
              </p>
            </div>
          </td>
        </tr>
        <!-- end: tr -->
        <tr>
          <td class="bg_white">
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
              <tr>
                <td class="bg_white">
                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                      <td class="bg_white email-section">
                        <div class="heading-section" style="text-align:center;padding:0 30px;">
                          <h2>All New Service Pages</h2>
                          <p>We've redesigned and reinvented how deliver our services. We have a general breakdown of each service, plus a detailed service page for those of you who want to learn more specific details.</p>
                        </div>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tr>
                            <td valign="top" width="50%">
                              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                  <td style="padding-top:20px;padding-right:10px;">
                                    <a href="https://moveandstore.com/services/residential"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6a5e0310-9a5a-4b52-8487-4702c8cf4fb3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;"></a>
                                    <div class="text-tour" style="text-align:center;">
                                      <h3>
                                        <a href="https://moveandstore.com/services/residential">Residential</a>
                                      </h3>
                                      <span class="price">Services include Local Moving, Long Distance and Labor.</span>
                                    </div>
                                  </td>
                                </tr>
                                <tr>
                                  <td style="padding-top:20px;padding-right:10px;">
                                    <a href="https://moveandstore.com/services/collegiate"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/e5542099-d033-42ae-8f32-c9198cdc6e00.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;"></a>
                                    <div class="text-tour" style="text-align:center;">
                                      <h3>
                                        <a href="https://moveandstore.com/services/collegiate">Collegiate</a>
                                      </h3>
                                      <span class="price">Services include Dorm Store, Lease Layover, Local Moving, and Labor.</span>
                                    </div>
                                  </td>
                                </tr>
                                <tr>
                                  <td style="padding-top:20px;padding-right:10px;">
                                    <a href="https://moveandstore.com/services/commercial"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/22fec672-03f3-4285-a75c-9dc4e1ef78f3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;"></a>
                                    <div class="text-tour" style="text-align:center;">
                                      <h3>
                                        <a href="https://moveandstore.com/services/commercial">Commercial</a>
                                      </h3>
                                      <span class="price">Services include FF&amp;E, Employee Relocation, Corporate Relocation, and Instutional Moving.</span>
                                    </div>
                                  </td>
                                </tr>
                              </table>
                            </td>


                          </tr>
                        </table>
                      </td>
                    </tr>
                    <!-- end: tr -->
                  </table>
                </td>
              </tr>
              <!-- end:tr -->
              <tr>
                <td class="bg_white email-section" style="width:100%;">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td valign="middle" width="50%">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                          <tr>
                            <td>
                              <img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6f23aa84-082e-4dba-9d2f-ca5c9fd414af.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td valign="middle" width="50%">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                          <tr>
                            <td class="text-services" style="text-align:left;padding-left:25px;">
                              <div class="heading-section">
                                <h3>Moving Tips</h3>
                              </div>
                              <div class="services-list">
                                <div class="text">
                                  <h4>1. Pack up your things</h4>
                                  <p>A small river named Duden flows by their place and supplies</p>
                                </div>
                              </div>
                              <div class="services-list">
                                <div class="text">
                                  <h4>2. Search for Destination</h4>
                                  <p>A small river named Duden flows by their place and supplies</p>
                                </div>
                              </div>
                              <div class="services-list">
                                <div class="text">
                                  <h4>3. Be Responsible</h4>
                                  <p>A small river named Duden flows by their place and supplies</p>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!-- end: tr -->
            </table>
          </td>
        </tr>
        <!-- Leave a Review -->
        <tr>
          <td class="bg_light email-section">
            <div class="heading-section" style="text-align:center;padding:0 30px;">
              <h2>Leave us a Review!</h2>
              <p>Had a good moving experience in the past? Please leave us a review on Google!</p>
              <p><a href="#" class="btn btn-primary">Leave a Review</a>
            </p>
          </div>
        </td>
      </tr>
      <!-- 1 Column Text + Button : END -->
    </table>
    <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
      <tr>
        <td valign="middle" class="bg_black footer email-section">
          <table>
            <tr>
              <td valign="top" width="60%" style="padding-top:20px;">
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                  <tr>
                    <td style="text-align:left;padding-right:10px;">
                      <h3 class="heading">Follow Us</h3>
                      <p>Get the latest updates!</p>
                      <ul class="social">
                        <li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/31d75ed2-3027-49aa-b9f2-1969b2cb1f4b.png" alt="" style="width: 30px; padding-right:10px; max-width: 600px; height: auto; display: block;">
                        </li>
                        <li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1f92f2b1-2e26-4add-acf8-b4f8c2056309.png" alt="" style="width: 30px; padding-right: 10px; max-width: 600px; height: auto; display: block;">
                        </li>
                        <li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/63ede42c-5969-4eb5-8f64-5aa9add11cf6.png" alt="" style="width: 30px; max-width: 600px; height: auto; display: block;">
                        </li>
                      </ul>
                    </td>
                  </tr>
                </table>
              </td>
              <td valign="top" width="40%" style="padding-top:20px;">
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                  <tr>
                    <td style="text-align:left;padding-left:5px;padding-right:5px;">
                      <h3 class="heading">Contact Info</h3>
                      <ul>
                        <li>
                          <span class="text">130 Industrial Drive<br>Birmingham,AL 35211</span>
                        </li>
                        <li>
                          <span class="text"><a href="tel:2056244537">205-624-4537</a></span>
                        </li>
                      </ul>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- end: tr -->
      <tr>
        <td valign="middle" class="bg_black footer email-section">
          <table>
            <tr>
              <td valign="top" width="50%">
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                  <tr>
                    <td style="text-align:left;padding-right:10px;">
                      <p>© 2019 Move &amp; Store. All Rights Reserved.</p>
                    </td>
                  </tr>
                </table>
              </td>
              <td valign="top" width="33%">
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                  <tr>
                    <td style="text-align:right;padding-left:5px;padding-right:5px;">
                      <p><a href="*|UNSUBSCRIBE|*" style="color:rgba(255,255,255,.4);">Unsubscribe</a>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
</center>
</body>
</html>

我不确定为什么你的主图是背景图,但如果你把它做成常规图片,主图就会显示在每个主要的电子邮件客户端中,包括 Gmail 和 Yahoo。

试试这个:

<tr>
  <td valign="middle" class="hero bg_white" style="">
    <img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg" width="600" />
  </td>
</tr>

我把图片下面空的h2拉出来了,方便显示相关代码

在我这样做之前,您的电子邮件英雄没有显示在 Outlook 2007-2019 中。即使将英雄更改为 img,您在 Outlook 和其他客户端中仍会遇到此电子邮件的严重问题。我建议进行更多测试和开发,以帮助确保您的客户看到您的消息。

祝你好运。