Question

我遇到了“响应式”电子邮件签名的问题。它由两个彼此相邻的桌子组成，当没有空间坐在彼此旁边时，右边的桌子在左边的桌子下方移动。

在很多Outlook怪癖之后，剩下的唯一一个是两个表之间的奇怪差距，只在Outlook中可见。我已经阅读并研究过这里提供的许多修复和技巧，以及关于酸，Litmus等的电子邮件，但似乎没有一个真正起作用。

包括我现在已解决的代码。

任何可以帮助我解决这个难题的签名向导？

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="0" border="0" align="left" style=" margin:0; padding:0; border:0; border-spacing:0;">
    <tr>
      <td>
        <!--[if gte mso 9]>
                <table cellspacing="0" cellpadding="0" border="0" width="520" height="232" style="display:table;">
                <tr>
                <td width="260" height="232" style="vertical-align:top; align:left; display:table-cell;">
                <![endif]-->
        <table cellspacing="0" cellpadding="0" border="0" align="left" style=" width:260px!important; margin:0; padding:0; border:0; border-spacing:0;">
          <tr>
            <td height="232" width="200">
              <a href="http://www.stamix.be/nl" target="_blank">
                <img src="https://ibb.co/f9JGSH" width="260" height="232" border="0" alt="image 1" style="margin:0; padding:0; display:block; border-collapse:collapse; border-spacing:0;" />
              </a>
            </td>
          </tr>
        </table>
        <!--[if gte mso 9]>
                </td>
                <td style="width:260px; height:232px; vertical-align:top; align:left; display:table-cell;">
                <![endif]-->
        <table cellspacing="0" cellpadding="0" border="0" align="left" style=" width:260px!important; margin:0; padding:0; border-spacing:0;">
          <tr>
            <td height="232" width="200">
              <a href="http://www.stamix.be/nl" target="_blank">
                <img src="https://ibb.co/iWhbSH" width="260" height="232" border="0" alt="image 2" style="margin:0; padding:0; display:block; border-collapse:collapse; border-spacing:0;" />
              </a>
            </td>
          </tr>
        </table>
        <!--[if gte mso 9]>    
                </td></tr></table>
                <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

Answer 1

这适用于每个版本的Outlook，并且在我使用Litmus测试的每个电子邮件客户端中看起来都很好：

最大的问题是代码不一致。 Outlook有时会忽略样式表。

<table width="100%" cellspacing="0" cellpadding="0" border="1" align="left" style=" margin:0; padding:0; border:0; border-spacing:0;">
    <tr>
        <td>
        <!--[if gte mso 9]>
        <table cellspacing="0" cellpadding="0" border="0" width="520" height="232" style="display:table;">
          <tr>
            <td width="260" height="232" style="vertical-align:top; align:left; display:table-cell;">
        <![endif]-->
        <table cellspacing="0" cellpadding="0" border="0" align="left" style=" width:260px!important; margin:0; padding:0; border:0; border-spacing:0;">
            <tr>
                <td height="232" width="260">
                    <a href="http://www.stamix.be/nl" target="_blank">
                        <img src="https://ibb.co/f9JGSH" width="260" height="232" border="0" alt="image 1" style="margin:0; padding:0; display:block; border-collapse:collapse; border-spacing:0; background: red;" />
                    </a>
                </td>
            </tr>
        </table>
        <!--[if gte mso 9]>
            </td>
            <td width="260" style="width:260px; height:232px; vertical-align:top; align:left; display:table-cell;">
        <![endif]-->
        <table width="260" cellspacing="0" cellpadding="0" border="0" align="left" style=" width:260px!important; margin:0; padding:0; border-spacing:0;">
            <tr>
                <td height="232" width="260">
                    <a href="http://www.stamix.be/nl" target="_blank">
                        <img src="https://ibb.co/iWhbSH" width="260" height="232" border="0" alt="image 2" style="margin:0; padding:0; display:block; border-collapse:collapse; border-spacing:0; background: blue;" />
                    </a>
                </td>
            </tr>
        </table>
        <!--[if gte mso 9]>    

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

        <![endif]-->
    </td>
</tr>
</table>

这也有效。它没有堆叠，但你没有真正解释为什么需要它来堆叠。因此，如果您不需要堆叠图像，这是一个更容易操作的代码：

<table width="520" cellspacing="0" cellpadding="0" border="1">
  <tr>
      <td width="260">
        <a href="http://www.stamix.be/nl" target="_blank"><img src="https://ibb.co/f9JGSH" width="260" height="232" border="0" alt="image 1" style="margin:0; padding:0; display:block; border-collapse:collapse; border-spacing:0; background: #ffff00;" /></a>
      </td>
      <td width="260">
        <a href="http://www.stamix.be/nl" target="_blank"><img src="https://ibb.co/iWhbSH" width="260" height="232" border="0" alt="image 2" style="margin:0; padding:0; display:block; border-collapse:collapse; border-spacing:0; background: #ff00ff;" /></a>
      </td>
  </tr>
</table>

祝你好运。

使用对齐以支持浮动以获得“响应”签名时，Outlook中的表之间不可能存在差距

1 个答案: