向 Outlook Windows 中的 table 元素添加了额外的填充

Question

这是我的 HTML:

<table align="center" border="0" cellpadding="0" cellspacing="0" id="wrapper"
  style="max-width: 550px; padding-top: 10px; width: 100% !important; " width="100%">
  <!--[if mso]><center><tr><td><table border="0" cellpadding="0" cellspacing="0" width="550"><![endif]-->
  <tr>
    <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt ; ">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td style=" font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 150%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 10px ; ">
            <table bgcolor="#90ee90" border="0" cellpadding="0" cellspacing="0" style="margin: 28px 0px; padding: 0;" width="100%">
              <tbody>
                <tr>
                  <td>
                    <!--[if mso]>
                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 30%;" width="165">
                    <tr>
                    <td style="padding-right: 20px">
                    <![endif]-->
                      <img align="left" style="width: 30%; margin-right: 4%;" width="165" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAh1BMVEUxMjH8/v8tLixQUVEYGhjU0tT29/ghHx/P0dIhIiEnKScVFhXm6OqCf4CnqKnW1dUbHBvb3N/JyMlYVVUAAAANDwyGh4lEPz8kJSO5u734+vuwsLGdnJ3v8PFBQUEqKSlJSklfX1+enp+Uk5Vzc3N5d3cBBgC9v8CDhIRpaGloZGVFRkY6OjlfBncRAAADPklEQVR4nO3Z6XKiQBSGYWQIkUUFAw4ad03U0fu/vlGkEfXQahFTUvU+vxJz6PQnbS9oGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACeyBQ9UCrX5tckjmVZQaKrKmn3duN3cf6IpJbNqVyraT3x/iz6zWazO5x5TmmV3GxqVjmgN2+IYqHW6si1H2VvtOsMR3nVaB64YpX5V2421U2qBlyUtCwmbD6W0FvaZ3X2LHg0YVfqxyOsXlnTP5Awbl9V9qSImoRv3tMC/kDCYCiUboSBWp4wFO/5A4J1acDqCc0PqXTwSELfqziTJq3ygNUTemEh1+nHz+sZtSyhH1QMaG47b0rWBT9/QRwfKuGpLNWZCj0xt6qjq5mbuMs8r3Vduwvztvxjkb3/sTupvBaagZWJsoa/vtUrQj9OCdenspTUk0RN0pv48Gc36me/L4VxmrcUZWvXW7TfJFTNV+RlCVvygpV3JEvY05elEtXX7+yFKFsZh7oFzsmm3474DlfwhISqryMvK3YXq/7eaqG7uE4J1T1s+MvguJdxg5T22ldJ2IoKH8KSQVdYLOz+l2c5d00br5LQDwvmJRFjv1EQtj/iO0K+SsIz/ZIjgzm7KBy1x+KsW1SrhIZzvWNaGTdOCvVKaAQb+6p6qV/lapZwfzy8Pl18ae9i3RLue5z0Lk/NY91n8VUSht0C7Qp+eIxhtPrFaXWlG6evknAdBydll8RH5mGwepNefvsHE81/eJWE9+xp4sbgoDE7DkrX26rThXQSUWqVMNtof6q+ukaWUDrmK3VKGKhhuVXFUbZ2/KvBPWxF8Rmpy656BGSPj0d1a6Mi1yChPTozEJ9iTPLZsz1NLMdQJ2Jbu7q8SMJLYkKn+KjNP+1u9OtnnRIaVigW7+qw4t+X0Nxdb0v3s5TuFtYsoeGO/avSof4hds0SGqb3eV442tzo+dMSWuHA3ruVMOimZZfKv3sygvHn6cunsGfdWkiTduPQ4qD5o48SD5z31K0j+ORdpLnMdOLpejhvz4ebnXfHRiH7D1W/UvtdppskTpLcEQ8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAL/oP5BU3wQ/BxT8AAAAASUVORK5CYII=" />
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->

                    <div style="margin: 4%;">
                      <p style="margin: 1em 0;">This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows)</p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
      <!--[if mso]></td></tr></table></center><![endif]-->
    </td>
  </tr>
</table>

它应该看起来像这样：

它在大多数电子邮件客户端上看起来不错，但在 Outlook windows 中查看时，它看起来像这样：

似乎在图像周围添加了一些额外的填充，文本上的边距似乎也不起作用。有人知道如何解决这个问题吗？

Answer 1

此布局似乎无法修复。 Outlook 所做的是尝试 'float' 在 div 上显示图像，但显然效果不佳。

本文提出了此布局的另一个问题，即链接在文本块中的图像旁边时可能无法点击（例如，与单独的 table 单元格相反）：https://help.activecampaign.com/hc/en-us/articles/115001444310-Common-email-display-issues-with-Outlook --所以也要测试那个方面。

恕我直言，最好将其放在自己的 table 单元格中。 Div 从来没有得到很好的支持。

Answer 2

这看起来像是来自图像周围的额外幽灵 table。

删除它可以解决问题，但您需要添加一些间距。

为此，您可以在图像上使用 hspace="" 属性来提供边距。

<p style="margin: 1em 0;">
    <img align="left" style="width: 30%; margin-right: 4%;" hspace="20" width="165" src="https://dummyimage.com/165x165/000/fff&text=test" />This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows)</p>

尽管这将适用于左侧和右侧。

不是一个完整的解决方案，但它可能是一个开始。

Answer 3

其实我还有一个解决办法...

将 <td> 上的填充更改为 <table> 上的边距。看起来可行。

至于它为什么有效，我还不太确定...

<!--[if mso]>
    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 30%;margin-right: 20px" width="165">
    <tr>
    <td>
    <![endif]-->
        <img align="left" style="width: 30%; margin-right: 4%;" width="165" src="https://dummyimage.com/165x165/000/fff&text=test" />
    <!--[if mso]>
    </td>
    </tr>
    </table>
<![endif]-->
    ```

向 Outlook Windows 中的 table 元素添加了额外的填充

Extra padding added to table element in Outlook Windows

html

css

email

html-email