响应式电子邮件 - 导致 Outlook 出现问题的条件语句

Question

我正在为响应式电子邮件构建一个模板，在一个部分中，我有两个文本块，我们希望将它们堆叠在较小的设备中。奇怪的是，Outlook 条件语句仅在 Outlook 中导致它们周围有额外的填充。您对包含图像等的单元格非常有用，但是当单元格仅包含文本时，就好像单元格折叠了一样。一旦我删除了条件，单元格就会准确地位于我想要的位置。我正在使用 Litmus 运行测试，不确定我是否可以 post 一个 link 测试结果，因为需要密码。这是一个 fiddle 来显示代码：http://jsfiddle.net/roob/bmeh368w/
outlook的条件语句：

              <first text block>

              <!--[if (gte mso 9)|(IE)]>
              </td>
              <td align="left" valign="top" width="300">
              <![endif]-->

              <second block>

              <!--[if (gte mso 9)|(IE)]>
              </td>
              </tr>
              </table>
              <![endif]-->

Answer 1

Outlook 使用 Word 呈现 HTML 邮件正文标记。您可以在 MSDN 中的以下系列文章中找到受支持和不受支持的 HTML 元素、属性和级联样式表属性：

希望这些信息对您有所帮助。

Answer 2

我相信我看到了这个问题。条件代码在 table 中有 align="center" 而不是 align="left" 和两个 300px 的 TD，而 table 应该仅为 270px 或 280px。这是在 table 周围添加额外的 30px 和 20px 的 'whitespace'。更改 tds 的大小和 table 宽度，它应该根据需要匹配。

            <table width="100%" class="emailContainer" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">   
              <tr>
                <td align="center" valign="top" style="padding:25px 20px 10px 20px;">
                  <!--[if (gte mso 9)|(IE)]>
                  <table align="left" border="0" cellspacing="0" cellpadding="0" width="520">
                  <tr>
                  <td align="left" valign="top" width="260">
                  <![endif]-->
                    <table class="flexibleColumn" width="260" align="left" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td align="center" valign="top" style="padding:0 10px 0 0;">
                          <table border="0" cellspacing="0" cellpadding="0" width="100%">
                            <tr>
                              <td style="font-family:Georgia, Times, serif;color:#b8b8b8;font-size:13px;text-align:left;padding:0px 0px 5px 0px;-webkit-text-size-adjust:none;" valign="top">
                              <b>SPOTLIGHT</b></td>
                            </tr>
                            <tr>
                              <td valign="top" style="font-family:Georgia, Times, serif;color:#FFFFFF; font-weight:normal;font-size:12px;line-height:19px;text-align:left;padding:0 20px 0 0;-webkit-text-size-adjust:none;">
                              <a href="http://graphics.latimes.com/travel-to-cuba/#navtype=outfit" target="_blank" style="color:#FFFFFF;text-decoration:none; font-size:13px; font-weight:bold;">Visiting a long-forbidden neighbor</a> | Only 93 miles from the U.S., Cuba has been closed to most American tourists for more than 50 years. But no more. Soon Americans will be flocking to this island nation. Before this happens, get an exclusive look inside the country's mysterious appeal.<br />
                              <a href="http://graphics.latimes.com/travel-to-cuba/#navtype=outfit" target="_blank" style="color:#bc3133;text-decoration:none;font-size:11px; font-style:italic;">Read more &raquo;</a></td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  <!--[if (gte mso 9)|(IE)]>
                  </td>
                  <td align="left" valign="top" width="260">
                  <![endif]-->
                    <table width="260" class="flexibleColumn" align="left" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="100%" align="center" valign="top" style="padding:0;">
                          <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td style="font-family:Georgia, Times, serif;color:#b8b8b8;font-size:13px;text-align:left;padding:0px 0px 5px 0px;" valign="top">RELATED</td>
                          </tr>
                          <tr>
                            <td style="font-family:Georgia, Times, serif;color:#ffffff;font-size:12px; font-weight:bold;line-height:19px;text-align:left;padding:0;-webkit-text-size-adjust:none;" valign="top">
                            <a href="http://www.latimes.com/travel/la-tr-d-cuba-need-to-know-20150510-story.html" target="_blank" style="color:#FFFFFF;text-decoration:none;">What to know before you go &raquo;</a><br />
                            <a href="http://graphics.latimes.com/cuba-cars/" target="_blank" style="color:#FFFFFF;text-decoration:none;">Getting a handle on its classic cars &raquo;</a><br />
                            <a href="http://www.latimes.com/travel/la-tr-d-cuba-watson-hemingway-20150510-story.html" target="_blank" style="color:#FFFFFF;text-decoration:none;">Ernest Hemingway's homestead &raquo;</a><br />
                            <a href="http://www.latimes.com/travel/la-tr-cuba-then-now-20150506-htmlstory.html" target="_blank" style="text-decoration:none;color:#ffffff;">Photo gallery: Then and now &raquo;</a><br />
                            <a href="http://www.latimes.com/la-tr-cuba-video-playlist-20150507-premiumvideoplaylist.html" target="_blank" style="color:#FFFFFF;text-decoration:none;">Video on navigating the country &raquo;</a><br />
                            <a href="http://www.latimes.com/travel/la-tr-readers-photos-of-cuba-20150414-pg-photogallery.html" target="_blank" style="color:#FFFFFF;text-decoration:none;">Readers share their photos &raquo;</a></td>
                          </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  <!--[if (gte mso 9)|(IE)]>
                  </td>
                  </tr>
                  </table>
                  <![endif]-->
                </td>
              </tr>
            </table>   
          <!-- Stacking blocks -->

响应式电子邮件 - 导致 Outlook 出现问题的条件语句

Responsive Email - Conditional Statements causing problems in Outlook

email

responsive-design

outlook

html-email