时间戳

首页 > 解决方案 > 在 Outlook Windows 中的表格元素中添加了额外的填充

html - 在 Outlook Windows 中的表格元素中添加了额外的填充

问题描述

这是我的 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 窗口中查看时，它看起来像这样： 在此处输入图像描述

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

标签： htmlcssemailhtml-email

解决方案

其实我有另一个解决方案...

将 上的填充更改为 上的<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]-->
    ```

推荐阅读