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

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

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

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

aligning tables left and right for responsive html emails - Outlook 2010 Issue

html

css

email

outlook