Question

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

编辑：我不打算让Outlook中的电子邮件的响应部分工作。我希望2个表（在jsfiddle示例中为Left＆amp; 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和＆amp; 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/

Answer 1

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

请参阅更新的小提琴：http://jsfiddle.net/bxdUp/1/

您目前拥有align="left"的正确表格，但我已成功使用Outlook表格对齐来操纵align值。

Answer 2

对于任何遇到此问题的人，并且正在寻找上述问题的解决方案，其中响应式2列内容也是中心的，我发现使用条件仅为Outlook定义列使我的世界变得更容易。当然它在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.

Answer 3

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

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

Answer 4

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

不理想，但它对我有用。

在Outlook 2007,2010和2013中响应2列到1列电子邮件

4 个答案: