Question

我遇到了电子邮件编码的'nav'区域的问题。它在所有浏览器中都能正常工作并且可以响应地工作，但在outlook中打开时会执行此操作（http://imgur.com/3Ivr3pu）。

该块的代码如下。

任何想法如何让它坐在左边的元素旁边？

<layout label='Nav'>
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="580" class="deviceWidth" style="mso-table-lspace:0;mso-table-rspace:0;">
    <tr>
    <td>


<table border="0" cellpadding="0" cellspacing="0" align="left" width="50%" class="deviceWidth" style="mso-table-lspace:0;mso-table-rspace:0; border-collapse:collapse;">
<tr bgcolor="#9cacbc"><td class="borderBottom" width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px; border-right: 1px solid #ffffff;">
    <singleline><a href="#" title="Brochures" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Brochures</font></a></singleline>
</td>
<td class="noBorder borderBottom" width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px;border-right: 1px solid #ffffff;">
        <singleline><a href="#" title="Specials" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Specials</font></a></singleline>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" align="right" width="50%" class="deviceWidth" style="mso-table-lspace:0;mso-table-rspace:0; border-collapse:collapse;">
<tr bgcolor="#9cacbc"><td width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px; border-right: 1px solid #ffffff;">
        <singleline><a href="#" title="Destinations" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Destinations</font></a></singleline>
</td>
<td width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px;">
        <singleline><a href="#" title="Contact us" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Contact us</font></a></singleline>

        </td>
        </tr>
        </table>

</td></tr>
</table>
</layout>

Answer 1

事实是Outlook使用Word（而不是IE）来呈现HTML标记。尝试在Word中打开您的页面，以确保它正常工作。您可以在MSDN的以下系列文章中阅读受支持和不受支持的HTML元素，属性和级联样式表属性：

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

Answer 2

对于任何偶然发现此事的人：

方法1：VML 方法2：使用单元格（td）而不是浮动表。

为响应式html电子邮件左右对齐表格 - Outlook 2010问题

2 个答案: