Question

我有一封快速响应的电子邮件，我正在努力使Outlook看起来正确。

我有下面的html，它应该将2个表彼此相邻，但它们将它们堆叠在彼此之上。

我正在使用......

 <!--[if (gte mso 9)|(IE)]>

目标展望但似乎忽略了这一点。它也忽略了样式标记中的最大宽度调用。

知道为什么会这样吗？

<tr>
    <td class="innerpadding ">
      <!--[if (gte mso 9)|(IE)]>
        <table width="360" align="left" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
      <![endif]-->
      <table class="col400" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;">  
        <tr>
          <td>
            <img src="Dog.png" alt="Dog Image" width="95%" border="0" style="width:95%;max-width:360px;"/>
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
      </table>
      <![endif]-->

      <!--[if (gte mso 9)|(IE)]>
        <table width="240" align="right" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
      <![endif]-->
      <table class="col240" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;">  
        <tr>
          <td>
            <span style="font-family:Arial, Helvetica, sans-serif;font-size:38px;color:#f4911c;">Text Here</span>
            <span style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#555557;display: block;font-style: italic;padding-top: 10px;line-height: 22px;">Text Here</span>
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
      </table>
      <![endif]-->


    </td>
  </tr>

Answer 1

尝试在容器表上设置width=""值。同时添加align="left"可能有所帮助。在过去，我发现Outlook已经需要它，即使它是对齐/浮动的子元素。

如果这不起作用，仅用于测试，请尝试在有条件隐藏的表中添加顶部填充和不同的bgcolor，以查看它们是否在触发。这将有助于诊断是否有条件破坏或其他...

Answer 2

您的两个表都设置为100％的宽度，尝试将每个表的style ='width：100％'设置为50％，看看是否有效。

此外，两个表的类（col400和col240）上的代码是什么？这可能会产生影响。

HTML电子邮件 - Outlook条件格式

2 个答案: