仅在 outlook 2016 中闯入 <td>

Question

我有一封带有 img 的电子邮件和 "border" 用 td 制作的电子邮件。仅在 outlook 2016 td 上显示宽度为 260px，中间有中断。我找不到原因。我用 cellpading:0、celspaccing:0 等复制了很多样式，但没有任何帮助。问题似乎只发生在 outlook 2016 上。相同的电子邮件代码在其他 outlook 和网络电子邮件客户端上工作正常。

那是我的 html 代码：

    <table style="border-collapse:collapse;margin: 0; padding: 0; line-height: 0; font-size: 0; width: 335px; display: inline-block; text-align: center; vertical-align: top;"
  border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
  <tbody>
    <tr>
      <td style="margin: 0; padding: 0; width: 20px; display: inline-block; text-align: center;" width="20">
      </td>
      <td style="margin: 0; padding: 0; line-height: 0; font-size: 0; width: 270px; text-align: center; background-color: #ffe0e6;"
        border="0" cellspacing="0" cellpadding="0" align="center" width="270">
        <img src="https://picsum.photos/270/270" width="270" style="max-width: 270px; max-height: 270px; margin: 0; padding: 0; line-height: 0; font-size: 0; border: 0; outline: 0; display: block; border-collapse:collapse;"
          border="0" outline="0" height="270" align="top" cellpadding=”0″>
      </td>
      <td style="margin: 0; padding: 0; line-height: 0; font-size: 0; text-align: center;" border="0" cellspacing="0" cellpadding="0"
        align="center">
        <table style="border-collapse:collapse;margin: 0; padding: 0; display: inline-block; line-height: 0; text-align: center; font-size: 0; vertical-align: top;"
          border="0" cellspacing="0" cellpadding="0" align="center">
          <tbody>
            <tr>
              <td style="width:10px; height: 10px; line-height:0; font-size: 0" height="10" width="10">&nbsp;
              </td>
            </tr>
            <tr>
              <td style="width:10px; height: 260px; background-color: #ffe0e6;  line-height:0; font-size: 0" height="260" width="10">&nbsp;
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="margin: 0; padding: 0; width: 25px; display: inline-block; text-align: center; height: 270px;" width="25" height="270">&nbsp;
      </td>
    </tr>
    <tr>
      <td style="margin: 0; padding: 0; width: 20px; height: 10px; display: inline-block; text-align: center; line-height:0; font-size: 0"
        width="20" height="10">
      </td>
      <td style="margin: 0; padding: 0; line-height: 0; font-size: 0; text-align: center;" border="0" cellspacing="0" cellpadding="0"
        align="center">
        <table style="border-collapse:collapse;margin: 0; padding: 0; display: inline-block; text-align: center; font-size: 0; line-height: 0; vertical-align: top; height: 10px"
          border="0" cellspacing="0" cellpadding="0" align="center" height="10">
          <tbody>
            <tr>
              <td style="margin: 0; padding: 0; height: 10px; width: 10px; line-height:0; font-size: 0; background-color: #ffffff;" width="10"
                height="10">&nbsp;
              </td>
              <td style="margin: 0; padding: 0; height: 10px; width: 260px; line-height:0; font-size: 0;  background-color: #ffe0e6;" width="260"
                height="10">&nbsp;
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="margin: 0; padding: 0; height: 10px; width: 10px; line-height:0; font-size: 0; background-color: #ffe0e6;" width="10"
        height="10">&nbsp;
      </td>
      <td style="margin: 0; padding: 0; width: 35px; display: inline-block; line-height:0; font-size: 0; text-align: center;" width="35">&nbsp;
      </td>
    </tr>
    <tr>
      <td style="margin: 0; padding: 0; height: 30px; display: inline-block; line-height:0; font-size: 0; text-align: center;"
        height="30">&nbsp;
      </td>
    </tr>
  </tbody>
</table>

我在发生中断的粉红色 td 元素中圈出了中断

那条粉红色竖线应该全是粉红色。就是那个td:

<td style="width:10px; height: 260px; background-color: #ffe0e6;  line-height:0; font-size: 0" height="260" width="10">&nbsp;
              </td>

Answer 1

您的 table 结构似乎不必要地复杂。您的内联样式有一些不需要存在的命令。您的左侧还有 table 个单元格，它们似乎没有做任何事情。所以为了简单起见，我创建了一个新的 table。为了简单起见，我创建了一个样式 sheet:

风格Sheet：

<style>
  table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
  }
</style>
<!--[if mso]><style>
  table, td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
    border-collapse: collapse;
  }
  img {
    -ms-interpolation-mode:bicubic;
  }
</style><![endif]-->

代码：

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td bgcolor="#ff0000">
        <img src="https://picsum.photos/270/270" width="270" style="max-width: 270px; max-height: 270px; margin: 0; padding: 0; line-height: 0; display: block;" border="0" outline="0" height="270" align="top" /></td>
      <td bgcolor="#ff0000" valign="top" width="10">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin: 0; padding: 0; line-height: 0; text-align: center; font-size: 0; vertical-align: top;">
            <tr>
              <td width="10" height="10">&nbsp;
              </td>
            </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#ff0000" align="left" height="10" style="max-height: 10px !important;">
        <table align="left" bgcolor="#ffffff" height="10" height="10" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; line-height: 0; font-size: 0;">
            <tr>
              <td width="10" height="10">
              </td>
            </tr>
        </table>
    </td>
    <td bgcolor="#ff0000"></td>
</tr>

我添加了红色作为背景色
如果需要，您可以轻松添加左侧 table 个单元格
background-color Outlook 有问题。我建议改用 background
- https://www.campaignmonitor.com/css/color-background/background-color/

我在 Litmus 中对此进行了测试，以确保它适用于所有 Outlook 版本、Gmail 和 Apple /Android。

获得相同效果的更简单方法是使用 box-shadow:

<img src="https://picsum.photos/270/270" width="270" style="max-width: 270px; max-height: 270px; margin: 0; padding: 0; line-height: 0; display: block; box-shadow: 10px 10px 0px red;" border="0" outline="0" height="270" align="top" />

需要注意的是，它不适用于 Outlook、Gmail，但如果适合您，那么设计样式就会容易得多。我是为其他寻找向图像添加阴影的方法的人提及的。

https://www.campaignmonitor.com/css/box-model/box-shadow/

祝你好运。

仅在 outlook 2016 中闯入 <td>

Break in <td> only in outlook 2016

email

outlook

html-table

html-email

outlook-2016