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

【问题标题】：Responsive Email - Conditional Statements causing problems in Outlook响应式电子邮件 - 导致 Outlook 出现问题的条件语句
【发布时间】：2015-08-08 13:50:34
【问题描述】：

我正在为响应式电子邮件构建一个模板，在一个部分中，我有两个文本块，我们希望将它们堆叠在较小的设备中。奇怪的是，Outlook 条件语句仅在 Outlook 中导致它们周围的额外填充。你对包含图像等的单元格工作得很好，但是当单元格只包含文本时，就好像单元格崩溃了。一旦我删除条件，单元格就位于我想要它们的位置。我正在使用 Litmus 运行测试，由于需要密码，因此不确定是否可以发布指向测试结果的链接。这是显示代码的小提琴：http://jsfiddle.net/roob/bmeh368w/
前景的条件陈述：

              <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]-->

【问题讨论】：

去掉IE检查，在Outlook中没有作用，去掉括号。
我已经能够使用过去电子邮件中的条件来控制表格的宽度，在这种情况下，它只会在 Outlook 中产生负面影响。顺便说一句，我忘了提到这里的问题只是 Outlook 2013/2010/2007。如果您建议删除它们，那么为什么每个博客都建议使用它们来使电子邮件在 Outlook 中响应？只要求进一步了解我的知识等。这是 Outlook 2013 中试金石测试的屏幕截图，带有和不带条件的相同文本块：s1228.photobucket.com/user/roobp57/media/…
删除括号没有任何区别 - 只是运行了更多测试并得到了相同的结果。作为参考，我的模板部分基于 Fabio Carneiros 技术，部分来自 Campaign Monitor 等来源：litmus.com/community/code/…
对不起，大卫，我没有意识到你在说什么。 IE 检查适用于使用 IE 作为渲染机器的 Outlook 2003 及更早版本。
如果您想查看my template，它适用于所有客户端。

标签： email responsive-design outlook html-email

【解决方案1】：

我相信我看到了这个问题。当表格仅应为 270px 或 280px 时，代码代码在表格中有 align="center" 而不是 align="left" 和 300px 处的两个 TD。这是在表格周围添加额外的 30 像素和 20 像素的“空白”。更改 tds 的大小和表格宽度，它应该可以根据需要匹配。

            <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 -->

【讨论】：

您实际上是正确的，但问题仍然存在。表格应该是 260 像素，我在发帖之前已经尝试过——我只是重新尝试过——仍然得到相同的结果。我刚刚用正确的宽度更新了小提琴。
所以情节变厚了：今天运行的石蕊测试表明条件语句也在其他地方放置了额外的填充。直到今天，它只对纯文本单元格执行此操作。
我想我有。必须将条件表更改为 align="left" 而不是 center。这与减少 table 和 td 大小相结合似乎已经完成了我的测试。在我的答案中编辑
确实做到了，我很惊讶我没有听懂。谢谢，表格对齐还解决了我在上面的电子邮件中提到的另一个难题。

【解决方案2】：

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

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

【讨论】：

谢谢尤金，但不是我要找的。我已经编写了相当多的响应式电子邮件并且熟悉这个概念，只是没有遇到这种异常情况并想知道我是否遗漏了什么