HTML 电子邮件 - Outlook 条件格式答案

【问题标题】：HTML Email - Outlook Conditional FormattingHTML 电子邮件 - Outlook 条件格式
【发布时间】：2014-02-27 02:26:09
【问题描述】：

我有一封响应式电子邮件，我正在努力使 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>

【问题讨论】：

标签： html email outlook html-email

【解决方案1】：

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

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

【讨论】：

感谢您的帖子，它帮助我以前所未有的方式调试它，现在我让它 100% 工作！干杯！
另一个提示是使用 align="right" 向您的表格添加一些额外的 style="float: right"。这两个在不同的电子邮件客户端中相互支持。因此，将两者一起使用以获得最佳效果。有人说用大写而不是小写的“float”写“float”会更好，但我还没有测试过。

【解决方案2】：

您的两个表格都设置为 100% 的宽度，请尝试将每个表格的 style='width:100%' 设置为 50%，看看是否可行。

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

【讨论】：

宽度 100% 应该是用于当媒体查询启动以使移动设备上的表格 100% 宽度时。对于 col400 和 col240 我有这样的@media only screen and (min-device-width: 601px) { .col400 {width: 400px!important;} .col240 {width: 240px!important;} }