响应式电子邮件模板 Outlook 显示问题答案

【问题标题】：Responsive email template Outlook displaying issue响应式电子邮件模板 Outlook 显示问题
【发布时间】：2014-04-05 18:53:56
【问题描述】：

有人可以看看下面的代码并告诉我我做错了什么吗？我正在石蕊上测试我的模板，一切看起来都很完美，但是当我向我的 Outlook 帐户发送测试电子邮件时，模板显示非常混乱。提前致谢。您可以在下面找到产品表代码。

<!-- * PRODUCT TABLE * -->
        <table mc:repeatable="productfourgrid" mc:variant="productfourgrid" cellpadding="0" cellspacing="0" border="0" align="center" class="producttable" width="600" bgcolor="#FFFFFF">

            <!-- * TOP SPACER * -->
            <tr>
                <td colspan="3" height="10"></td>
            </tr>
            <!-- * END OF TOP SPACER * -->

            <tr>
                <td>
                    <!-- * PRODUCT 2 TABLE * -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="product" width="297">

                <tr>
                    <td>

                    <!-- * PRODUCT 1 * -->
                    <table cellpadding="0" cellspacing="0" border="0" align="left" class="product" width="144">

                        <!-- * PRODUCT IMAGE HERE * -->
                        <tr>
                            <td width="5"></td>
                            <td align="center"><img mc:edit="productimage1" class="productimg" src="images/product1.png" alt="Image Alt Here" title="Image Title Here"/></td>
                            <td width="5"></td>
                        </tr>
                        <!-- * END OF PRODUCT IMAGE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="10"></td>
                            <td height="10"></td>
                            <td height="10"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRODUCT DESCRIPTION HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="productdescription1" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRODUCT DESCRIPTION HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRICE HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="price1" align="center" style="font-size:18px;">DKK 499,00</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRICE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * BUTTON HERE * -->
                        <tr>
                            <td></td>
                            <td align="center">
                            <a href="#" target="_blank"><img mc:edit="button1" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
                            <td></td>
                        </tr>
                        <!-- * END OF BUTTON HERE * -->

                    </table>
                    <!-- * END OF PRODUCT 1 * -->

                    <!-- * PRODUCT 2 * -->
                    <table cellpadding="0" cellspacing="0" border="0" align="right" class="product" width="144">

                        <!-- * PRODUCT IMAGE HERE * -->
                        <tr>
                            <td width="5"></td>
                            <td align="center"><img mc:edit="productimage2" class="productimg" src="images/product2.png" alt="Image Alt Here" title="Image Title Here"/></td>
                            <td width="5"></td>
                        </tr>
                        <!-- * END OF PRODUCT IMAGE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="10"></td>
                            <td height="10"></td>
                            <td height="10"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRODUCT DESCRIPTION HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="productdescription2" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRODUCT DESCRIPTION HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRICE HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="price2" align="center" style="font-size:18px;">DKK 499,00</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRICE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * BUTTON HERE * -->
                        <tr>
                            <td></td>
                            <td align="center">
                            <a href="#" target="_blank"><img mc:edit="button2" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
                            <td></td>
                        </tr>
                        <!-- * END OF BUTTON HERE * -->

                    </table>
                    <!-- * END OF PRODUCT 2 * -->
                </td>
                </tr>  
               </table>  

      <!-- * PRODUCT 2 TABLE * -->   

       <!-- * PRODUCT 2 TABLE * -->
            <table cellpadding="0" cellspacing="0" border="0" align="right" class="product" width="297">  

                <tr>
                    <td>

                    <!-- * PRODUCT 3 * -->
                    <table cellpadding="0" cellspacing="0" border="0" align="left" class="product" width="144">

                        <!-- * PRODUCT IMAGE HERE * -->
                        <tr>
                            <td width="5"></td>
                            <td align="center"><img mc:edit="productimage3" class="productimg" src="images/product3.png" alt="Image Alt Here" title="Image Title Here"/></td>
                            <td width="5"></td>
                        </tr>
                        <!-- * END OF PRODUCT IMAGE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="10"></td>
                            <td height="10"></td>
                            <td height="10"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRODUCT DESCRIPTION HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="productdescription3" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRODUCT DESCRIPTION HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRICE HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="price3" align="center" style="font-size:18px;">DKK 499,00</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRICE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * BUTTON HERE * -->
                        <tr>
                            <td></td>
                            <td align="center">
                            <a href="#" target="_blank"><img mc:edit="button3" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
                            <td></td>
                        </tr>
                        <!-- * END OF BUTTON HERE * -->

                    </table>
                    <!-- * END OF PRODUCT 3 * -->

                    <!-- * PRODUCT 4 * -->
                    <table cellpadding="0" cellspacing="0" border="0" align="right" class="product" width="144">

                        <!-- * PRODUCT IMAGE HERE * -->
                        <tr>
                            <td width="5"></td>
                            <td align="center"><img mc:edit="productimage4" class="productimg" src="images/product4.png" alt="Image Alt Here" title="Image Title Here"/></td>
                            <td width="5"></td>
                        </tr>
                        <!-- * END OF PRODUCT IMAGE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="10"></td>
                            <td height="10"></td>
                            <td height="10"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRODUCT DESCRIPTION HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="productdescription4" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRODUCT DESCRIPTION HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * PRICE HERE * -->
                        <tr>
                            <td></td>
                            <td mc:edit="price4" align="center" style="font-size:18px;">DKK 499,00</td>
                            <td></td>
                        </tr>
                        <!-- * END OF PRICE HERE * -->

                        <!-- * TOP SPACER * -->
                        <tr>
                            <td height="5"></td>
                            <td height="5"></td>
                            <td height="5"></td>
                        </tr>
                        <!-- * END OF TOP SPACER * -->

                        <!-- * BUTTON HERE * -->
                        <tr>
                            <td></td>
                            <td align="center">
                            <a href="#" target="_blank"><img mc:edit="button4" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
                            <td></td>
                        </tr>
                        <!-- * END OF BUTTON HERE * -->

                    </table>
                    <!-- * END OF PRODUCT 4 * -->
                   </td>
                  </tr>
                 </table>

              </td>
           </tr>
      </table>
      <!-- * PRODUCT 2 TABLE * -->   

        <!-- * END OF PRODUCT TABLE * -->

【问题讨论】：

你能发一张混乱的截图吗？你的一张对齐的桌子是否倒塌了？
感谢您的回复。是的，正好有 2 个对齐的表格撞了下来。我无法导入图像，因为我需要至少 10 声望 =)
+1。现在你有 10 点声望。
在这里。非常感谢！ s29.postimg.org/byakpabpj/screen_shot_4.jpg
产品表有 4 个网格产品，但右侧的表中包含 2 个产品也在下降..

标签： html email outlook

【解决方案1】：

尝试以下方法，看看有什么解决方法：

在每个不连续的<td> 上设置width=""。未指定时，Outlook 会出现宽度问题。
尝试使用表格单元格而不是将表格作为同级单元格放置。我看到您在表格宽度中允许了额外的空间，但是您可以通过这种方式避免它。如果您需要它做出响应，可以从您的媒体查询中切换display:block; width:100%; 上的<td> 以使它们溢出到下一行。基本example here。
尝试在图片上设置宽度，默认高度可能会导致问题。
将&nbsp; 放入所有空单元格中，以免它们塌陷。

您也不需要第一行的 colspan - 我怀疑这会有所不同，但在调试时保持它的整洁是件好事。让我知道这是怎么回事。

【讨论】：