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

时间：2014-04-05 18:53:57

标签： html email outlook

有人可以查看以下代码并告诉我我做错了什么吗？我在石蕊上测试我的模板，一切看起来都很完美但是当我向我的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 * -->

1 个答案:

答案 0 :(得分：1)

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

  1. 在每个width=""上自行设置<td>。{li>未指定Outlook时，Outlook存在宽度问题。
  2. 尝试使用表格单元格而不是将表格作为兄弟姐妹。我看到你在桌子宽度上留出了额外的空间，但你可以这样避免它。如果您需要响应，则可以在媒体查询中切换display:block; width:100%;上的<td>以使其溢出到下一行。基本example here。
  3. 尝试在图片上设置宽度，默认高度可能会导致问题。
  4. 将&nbsp;放在所有空单元格中，这样它们就不会崩溃。

    5. 你也不需要第一行的colspan - 我怀疑这有什么不同，但在调试时要保持干净。让我知道这是怎么回事。

相关问题
最新问题