响应式 3 列 html 电子邮件布局最后一列图像在 gmail 和 outlook 中过高了一个像素

Responsive 3 column html email layout last column image is one pixel too high in gmail and outlook

我有一个 3 列响应式电子邮件布局（代码如下）。这几乎完美。它在移动设备甚至 Outlook 桌面客户端中显示良好。但出于某种原因，最后一张图片在 Gmail 和 Outlook.com 中太高了一个像素。我知道这可能是因为 100% 的宽度，但有人知道如何解决吗？你会看到我什至在我的图像上设置了像素宽度和高度，但因为容器有 100% 的宽度，我认为这是导致它失败的原因。有什么技巧吗？

我添加了图像和 Photoshop 指南，您可以清楚地看到最后一个比其他的低一个像素。

<table cellspacing="0" cellpadding="0" style="width: 100%;">
                            <tr>
                                <td>



                                    <table cellspacing="0" cellpadding="0" style="width: 100%;">
                                        <tr>
                                            <td valign="top" class="responsive-td block3up" style="width: 180px; padding-right: 5px;padding-left:10px;">
                                                <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper">
                                                    <tr>
                                                        <td class="stylingblock-content-wrapper camarker-inner">
                                                            <table width="100%" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td align="center"><img data-assetid="84953" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/4adc30d0-46be-4e10-bdd5-b28937548ba4.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
                                                    <tr>
                                                        <td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner">
                                                            <i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/1/17/Free-Resources-for-Planning-Your-Next-Orlando-Vacation/" style="color:#808080;text-decoration:none;" title="">Free Resources for a Perfect Orlando Holiday</a></i>
                                                            <div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
                                                                <span class="blockme2">Whether it&rsquo;s your first trip to Orlando or you&rsquo;re coming back for more, Visit Orlando has free, trusted resources designed to help you plan your perfect Orlando holiday, including our Official Visitor Center, Live Chat assistance, an innovative mobile app and much more!</span></div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px; padding-right: 5px;">
                                                <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
                                                    <tr>
                                                        <td class="stylingblock-content-wrapper camarker-inner">
                                                            <table width="100%" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td align="center"><img data-assetid="84871" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/0739b042-e92e-42a9-b294-9be63f8a3000.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
                                                    <tr>
                                                        <td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/discounts-and-tickets/" style="color:#808080;text-decoration:none;" title="">Save Big With Orlando Deals &amp; Discounts</a></i>
                                                            <div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
                                                                <span class="blockme2">Not only is Visit Orlando a trusted source for discounted tickets to the world&rsquo;s most popular theme parks and attractions, but we&rsquo;re also your source for bargains throughout the destination. Save on resorts, dining, shopping and everything else you&rsquo;ll want to do in Orlando!</span></div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px;padding-right:10px;">
                                                <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
                                                    <tr>
                                                        <td class="stylingblock-content-wrapper camarker-inner">
                                                            <table width="100%" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td align="center"><img data-assetid="84872" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/db9decce-c593-4bbd-a3c2-e819df747c47.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
                                                    <tr>
                                                        <td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/2/07/Have-a-Blast-at-the-Newest-Attractions-in-Orlando" style="color:#808080;text-decoration:none;" title="">Blast Off With Orlando&rsquo;s Newest Thrills</a></i>
                                                            <div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
                                                                <span class="blockme2">Orlando is constantly improving. In fact, we added so many new attractions in 2017 that, even if you&rsquo;ve visited recently, you probably haven&rsquo;t seen them all &mdash; starting with all-new thrills at Walt Disney World Resort, Universal Orlando Resort, SeaWorld Orlando and LEGOLAND Florida Resort!</span></div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>



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

这里是 head 标签中的 CSS

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      ReadMsgBody{ width: 100%;}
      .ExternalClass {width: 100%;}
      .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
      body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
      p { margin: 1em 0;}
      table td { border-collapse: collapse;}
      img {outline:0;}
      a img {border:none;}
      p {margin: 1em 0;}
      @-ms-viewport{ width: device-width;}
    </style>
    <style type="text/css">
      @media only screen and (max-width: 480px) {
        .container {width: 100% !important;}
        .footer { width:auto !important; margin-left:0; }
        .content-padding{ padding:4px !important; }
        .mobile-hidden { display:none !important; }
        .logo { display:block !important; padding:0 !important; }
        img { max-width:100% !important; height:auto !important; max-height:auto !important;}
        .header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
        .photo img { width:100% !important; max-width:100% !important; height:auto !important;}
        .drop { display:block !important; width: 100% !important; float:left; clear:both;}
        .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
        .nav4, .nav5, .nav6 { display: none !important; }
        .tableBlock {width:100% !important;}
        .responsive-td {width:100% !important; display:block !important; padding:0 !important; }
        .fluid, .fluid-centered {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }
        .fluid-centered {
          margin-left: auto !important;
          margin-right: auto !important;
        }
        /* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body, .tb_properties{font-family: Arial !important; font-size: 25px !important; color: #808080 !important; line-height: 1.5 !important; padding: 0px !important; }.buttonstyles{font-family: arial, helvetica, sans-serif !important; font-size: 16px !important; color: #FFFFFF !important; padding: 10px !important; }h1{font-family: Arial !important; font-size: 28px !important; color: #202020 !important; line-height: 1 !important; }h2{font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important; }h3{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }a:not(.buttonstyles){line-height: 1 !important; }.mobile-hidden{display: none !important; }


/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
         .block3up { padding: 20px !important;background:#efefef;}
        .blockme2{font-size:22px !important;}
        .blockme{font-size:25px !important;}
      }
      @media only screen and (max-width: 640px) {
        .container { width:100% !important; }
        .mobile-hidden { display:none !important; }
        .logo { display:block !important; padding:0 !important; }
        .photo img { width:100% !important; height:auto !important;}
        .nav5, .nav6 { display: none !important;}
        .fluid, .fluid-centered {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }
        .fluid-centered {
          margin-left: auto !important;
          margin-right: auto !important;
        }
      }


    </style>
    <!--[if mso]>
      <style type="text/css">
          /* Begin Outlook Font Fix */
          body, table, td {
              font-family: Arial, Helvetica, sans-serif ;
              font-size:16px;
              color:#808080;
              line-height:1;
          }
          /* End Outlook Font Fix */
      </style>
    <![endif]-->
  </head>

如果您从 img 样式中删除 height: auto; 并添加 max-height: 120px; sheet。您的问题将得到解决。

我可能会建议您在 Litmus 或 Campaign Monitor 等测试服务中检查您的完整电子邮件。目前您显示的内容没有响应，并且表格和图像会发生奇怪的事情，具体取决于用于查看它们的 Web 客户端。

如果您正在做响应式，请将 max-height 添加到 @media 查询以微调输出。

祝你好运。