Outlook 电子邮件客户端中的白线问题 - 缩放和调整大小时显示不一致

Question

在某些电子邮件客户端（例如 Outlook）中面临白线问题，特别是在各种 Outlook 和 Outlook X-DPI 客户端上使用 Litmus 进行测试时。在本地测试期间也观察到该问题，当放大或调整窗口大小时，线条出现在不同的位置。水平和垂直方向都有白线出现，但垂直线更突出。

电子邮件 HTML 结构使用表格标签，其中包含图像和文本。虽然该问题特别出现在 Outlook 和相关客户端中，但其他电子邮件客户端似乎可以正确显示内容，没有任何白线。当使用标题“在网络上查看”中的行在网络浏览器中打开同一封电子邮件时，不会显示任何白线（浏览器上没有白线，只有特定的电子邮件客户端）

在不同的 Outlook 版本和分辨率上测试了电子邮件，问题仍然存在。

Outlook 2019 高缩放时有 2 行的屏幕截图

Outlook 2019 上多个缩放级别的单行

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
  ReadMsgBody {
    width: 100%;
  }

  .ExternalClass {
    width: 100%;
  }

  table {
    border-collapse: collapse;
  }

  .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;
  }

  @-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;
    }

    .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 {
      padding: 0px !important;
      font-size: 16px !important;
      line-height: 150% !important;
    }

    h1 {
      font-size: 22px !important;
      line-height: normal !important;
    }

    h2 {
      font-size: 20px !important;
      line-height: normal !important;
    }

    h3 {
      font-size: 18px !important;
      line-height: normal !important;
    }

    .buttonstyles {
      font-family: arial, helvetica, sans-serif !important;
      font-size: 16px !important;
      color: #FFFFFF !important;
      padding: 10px !important;
    }

    /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
  }

  @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:#000000;
              line-height:1;
          }
          /* End Outlook Font Fix */
      </style>
    <![endif]-->



<div style="font-size:0; line-height:0;">
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">

  <tr>
    <td valign="top">
      <!--[if mso]>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="templateColumns1"
                        role="presentation" style="width:600px;" width="600">
                <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="templateColumns1" role="presentation" style="width:600px;" width="600">
        <!-- Footer -->

        <tr>
          <td align="center" class="templateColumnContainer" style="width:100%;" valign="top">
            <table align="center" bgcolor="#c6dccf" border="0" cellpadding="0" cellspacing="0" class="footer-dm" role="presentation" width="100%">

              <tr>
                <td>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">

                    <tr>
                      <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="width:100%;" valign="middle">


                              <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border: 1px solid #c6dccf;">
                                <tr>
                                  <td align="left" height="30" style="font-size:1px;mso-line-height-rule:exactly;line-height:0px;border:0;height:0px;">
                                  </td>
                                </tr>
                                <tr>
                                  <td class="footer" style="color:#1a5252;text-align:center;font-family:Muli, Arial, sans-serif;font-weight:400;font-size:11px;mso-line-height-rule:exactly;line-height:20px;letter-spacing:0.07em;padding: 0px">
                                    <a alias="" conversion="true" data-linkto="https://" href="https://www.test.com" style="color:#1a5252;text-decoration:none;" target="_blank" title="test">Test |
                                      UK: 00000000 | US: 00000000
                                  </a></td>
                                </tr>
                              </table>

                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="templateColumns1" role="presentation" style="width:600px; border-bottom: 1px solid #c6dccf" width="600">
        <!-- Footer -->
        <tr>
          <td align="center" class="templateColumnContainer" style="width:100%;" valign="top">
            <table align="center" bgcolor="#c6dccf" border="0" cellpadding="0" cellspacing="0" class="footer-dm" role="presentation" width="100%">

              <tr>
                <td>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">

                    <tr>
                      <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">


                          <tr>
                            <td align="center" valign="middle">
                              <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">

                                <tr>
                                  <td align="center" class="templateColumnContainer" valign="middle" style="width: 250px!important;">
                                    <!--[if mso]>
                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                        <tr align="center">
                                          <td align="center" width="90" style="padding: 0;">
                                            <a href="test" target="_blank" title="Test">
                                              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" alt="test" width="140" height="60" style="border: 0; display: block;">
                                            </a>
                                          </td>
                                        </tr>
                                      </table>
                                    <![endif]-->
                                    <!--[if !mso]>-->
                                    <a href="test" target="_blank" title="test">
                                      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" alt="test" width="140" height="60" style="border: 0; display: block;">
                                    </a>
                                    <!--<![endif]-->

                                  </td>
                                  <td align="center" class="templateColumnContainer" style="width:50%;" valign="middle">
                                    <!--[if mso]>
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="test">test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 15px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                            <a href="tel:[phone]" style="color: #1a5252; text-decoration: none;" title="+0011223456">+0011223456</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="left" colspan="3" height="20" style="font-size: 1px; mso-line-height-rule: exactly; line-height: 0px; border: 0; height: 10px;"></td>
                                      </tr>
                                    </table>
                                  <![endif]-->
                                    <!--[if !mso]>-->
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="Test">Test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="test">test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="test">test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="tel:[phone]" style="color: #1a5252; text-decoration: none;" title="+0011223456">+0011223456</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="left" colspan="3" height="20" style="font-size: 1px; mso-line-height-rule: exactly; line-height: 0px; border: 0; height: 10px;">
                                        </td>
                                      </tr>
                                    </table>
                                    <!--<![endif]-->

                                  </td>
                                  <td align="center" class="templateColumnContainer" style="width:25%;" valign="middle">
                                    <!--[if mso]>
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                    <![endif]-->
                                  </td>
                                </tr>
                                <tr align="center" width="100%">
                                  <!--[if mso]>
                                <td align="center" style="width:90px;max-width:90px;" width="90">
                                <![endif]-->
                                                              <!--[if !mso]>
                                <td align="center" style="width:100px;max-width:100px;" width="90">
                                <![endif]-->
                                </tr>
                              </table>
                              <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:128px;max-width:128px;" width="90">
                                <tr align="center" width="100%">
                                  <!--[if mso]>
                                  <td align="center" style="width:100px;max-width:100px;" width="90">
                                  <![endif]-->
                                                          <!--[if !mso]>
                                  <td align="center" style="width:127px;max-width:127px;" width="90">
                                  <![endif]-->
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <!--[if mso]>
                    </table>
                    <![endif]-->



                  </table>
                </td>
              </tr>
              <tr>
                <td align="left" class="bit-smaller2" height="15" style="font-size:1px;mso-line-height-rule:exactly;line-height:0px;border:none;height:15px;" valign="top">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

尝试将某些电子邮件客户端的行高和图像高度更改为偶数，使行消失（或将它们移动到外部区域），但它们开始在其他客户端中更加突出地出现。

现有的 StackOverflow 问题有一个答案，但这专门针对 Outlook 的缩放为 100% 并且 Windows 的显示缩放系数为 25% 的倍数时。

预计白线不会出现在任何缩放级别（影响 Litmus 上的 X-DPI 客户端）

有什么想法吗？

Answer 1

当您分配与“正文”背景颜色不同的背景颜色时，您必须将该背景颜色分配给几乎所有子元素，而不是仅将其应用于容器表/div，以避免 Outlook 上出现此问题。

如果你不遵循它，那么在某些情况下，主体背景颜色会覆盖某些空白区域的背景颜色。

让我们以您的电子邮件为例： “footer2”课程结束后有一个表格单元格。该表格单元格的高度为 10 像素，但它是空的。我知道这是一个垫片，但这个问题发生在这些空白区域。因此，您还必须为其指定背景颜色才能解决问题。

为了更好地理解它，您可以给出不同的身体背景颜色，然后您会看到它是该颜色而不是“白色”颜色。

我为我的客户编写了很多 html 电子邮件，这种 Outlook 问题真的很烦人。但我已经成功克服了这个:)

Answer 2

谢谢，您的建议很有帮助！ 遗憾的是 Outlook 没有处理这个问题...