10

我正在为移动设备优化 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/

4

4 回答 4

4

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

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

您目前有正确的表格align="left"，但我在 Outlook 表格对齐操作align值方面取得了成功。

于 2012-10-18T13:04:02.600 回答
3

对于遇到此 SO 并正在寻找上述问题的解决方案的任何人，其中响应式 2 列内容也以响应为中心，我发现使用条件来仅为 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.
于 2013-10-15T22:04:13.750 回答
0

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

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

于 2012-10-17T19:21:12.223 回答
0

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

不理想，但它对我有用。

于 2013-02-19T02:07:44.840 回答