Question

我正在为响应式电子邮件构建模板，在一个部分中，我有两个文本块，我们希望在较小的设备中进行堆叠。奇怪的是，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]-->

Answer 1

我相信我看到了这个问题。当表只应该是270px或280px时，代码代码在表中具有align =“center”而不是align =“left”而两个TD在300px处。这是在表格周围添加额外的30px和20px的“空白”。更改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 -->

Answer 2

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

希望您会发现此信息有用。

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

2 个答案: