Outlook 2007、2010 和 2013 中的响应式 2 列到 1 列电子邮件答案

【问题标题】：Responsive 2 column to 1 column email in Outlook 2007, 2010, and 2013Outlook 2007、2010 和 2013 中的响应式 2 列到 1 列电子邮件
【发布时间】：2023-03-12 03:55:02
【问题描述】：

我正在为移动设备优化 HTML 电子邮件。我的任务是寻找一个通用的解决方案来创建 2 列到 1 列的响应式布局。我发现了一篇由 Campaign Monitor 撰写的文章 - http://www.campaignmonitor.com/guides/mobile/responsive/。我已经尝试过他们的标记，它适用于大多数客户端和浏览器，但 Outlook 2007、2010 和 2013 除外。我提供了带有标记的 jsfiddle 链接以供参考。有没有办法在这些版本的 Outlook 中完成这项工作？

编辑：我不想让电子邮件的响应部分在 Outlook 中工作。我希望 2 个表（jsfiddle 示例中的 Left 和 Right）彼此相邻显示，而不是彼此堆叠。这适用于 Gmail（IE、FF、Chrome、Safari）、AOL（IE、FF、Chrome、Safari）、Yahoo（IE、FF、Chrome、Safari）、Hotmail（IE、FF、Chrome、Safari）、Apple Mail 4 & 5、Outlook 2003、Android 4.0、iOS 4、5 和 6。我只关心 Outlook 2007 及更高版本的渲染引擎发生变化。

<html>
<head>
  <style>
    @media all and (max-width: 590px){
      *[class].responsive{ width: 320px !important; }
    }
  </style>
</head>
<body>
  <table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td height="15"></td>
      </tr>
      <tr>
        <td width="100%">
          <table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
            <tbody>
              <tr>
                <td width="100%">
                  <table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
                    <tbody>
                      <tr>
                        <td width="100%" height="40" style="background-color: #ececec;">
                          <div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
                    <tbody>
                      <tr>
                        <td width="100%" height="40" style="background-color: #bcbcbc;">
                          <div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td height="15"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

http://jsfiddle.net/bxdUp/

【问题讨论】：

标签： html mobile outlook html-email

【解决方案1】：

您是否尝试将align="left" 和align="right" 添加到堆叠表中？

查看更新的小提琴：http://jsfiddle.net/bxdUp/1/

您当前拥有带有align="left" 的正确表格，但我已经成功地使用 Outlook 表格对齐操作 align 值。

【讨论】：

我还没试过。我现在就测试一下。感谢您的帮助。
除此之外，您可能还需要在您的内部表格上将border 属性设置为0 - 它不应该没关系，但我见过更奇怪的事情。
不幸的是，这在 Outlook 2007 和 2010 中似乎不起作用（请参阅此处的石蕊测试屏幕截图：outlook 2007 和 outlook 2010）

【解决方案2】：

对于遇到此 SO 并正在寻找上述问题的解决方案（其中响应式 2 列内容也以 ALSO 为中心）的任何人，我发现使用条件来仅为 Outlook 定义列让我的世界变得轻松 1^300。当然它在 Outlook 中不再是响应式的了，但真的... F Outlook。

<!-- define a 100% width table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
  <td width="100%" style="text-align:center; background-color:white">

    <!-- define a fixed width table using a class for responsive.  I found that defining an arbitary height seemed to be important ~ silly Outlook -->
    <!-- align center -->
    <table cellpadding="0" cellspacing="0" class="fixedWidthTable" border="0" height="300" align="center">
      <tbody>
      <tr>
        <td>

          <!-- align left (this renders as float:left in webkit).  Absolutely defined width. -->
          <table cellpadding="0" cellspacing="0" border="0" width="300" align="left" style="margin:0;padding:0;width:300px">
            <tr>
              <td>
                <!-- content -->
              </td>
            </tr>
          </table>

    <!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
    <!--[if mso]></td><td><![endif]-->
    <!-- Brilliant. -->

          <!-- align right (this renders as float:right in webkit).  Absolutely defined width. -->
          <table cellpadding="0" cellspacing="0" border="0" width="300" align="right" style="margin:0;padding:0;width:300px">
            <tr>
              <td>
                <!-- content -->
              </td>
            </tr>
          </table>

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


    ... close outer tables etc.

【讨论】：

天才，只是认为这将是解决方案。

【解决方案3】：

我发现在 Outlook 的情况下，表格宽度减少几个像素是有效的，我只能假设 Outlook 呈现的像素宽度与其他电子邮件客户端不同。

不理想，但它对我有用。

【讨论】：

我相信原因是 Outlook 在每个表格之后插入了一个小空间，而不是它们本身的表格大小不同。不过，让它们稍微小一点也可以解决问题。
这是有道理的。谢谢

【解决方案4】：

我认为它不适用于 Outlook 版本。因为首先 Outlook 不理解媒体查询。 Outlook 2007 版本基于 IE 的渲染引擎，而 Outlook 2010 和 2013 版本使用 Word 作为渲染引擎来显示 html 电子邮件。所以我相信没有办法让他们在 Outlook 中工作。

还有一点是，当这段代码在 Outlook 中执行时，它将忽略样式标签内的所有内容。您应该将样式设置为 Outlook 电子邮件的内联样式。

【讨论】：

我了解 Outlook 无法识别媒体查询，但这些媒体查询仅与移动设备相关。如果您查看 jsfiddle 示例，您会发现，如果您展开 html 输出容器，则两个表左对齐并彼此相邻。 Outlook 将表格堆叠在一起，而不是彼此相邻显示。
其实最后用IE的是Outlook 2003——2007+都用Word。另外，Outlook supports style tags（几乎每个主要的电子邮件客户端都这样做，Gmail 是唯一的例外）。