Outlook 2013 中的 HTML 电子邮件错位？答案

【问题标题】：HTML email misalignment in Outlook 2013?Outlook 2013 中的 HTML 电子邮件错位？
【发布时间】：2013-10-21 23:12:48
【问题描述】：

我有一个非常简单的 HTML 电子邮件模板 - 仅用于测试 - 它有 5 个包含一个单词的列，问题是在 Outlook 2013 中，第一列总是垂直未对齐。这是 HTML。

  <!DOCTYPE html>
<html><body>    
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
                <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                </tr></table></td>
                    </tr></table></td>
        </tr></tbody></table></body></html>

Outlook 2013 中的结果是：

这是 Outlook 输出的代码

<!DOCTYPE html><br />
<html><body>    <br />
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
                <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                </tr></table></td><br />
                    </tr></table></td><br />
        </tr></tbody></table></body></html><br />

问题与 Outlook 添加的所有额外 BR 标签有关，但我能做些什么呢？

谢谢！

【问题讨论】：

标签： html css email outlook vertical-alignment

【解决方案1】：

据我所知，电子邮件不支持外部样式，并且必须在每个标签内联应用样式。您是否尝试在每个嵌套的 td 上添加 valign="top"？

<td valign="top">
    Row
</td>

您也可以尝试关闭标签中嵌套的任何空白，例如：

<td valign="top">Row</td>

【讨论】：

正如我所说，样式是在发送电子邮件之前内联的，我有一个 PHP 函数来执行此操作，我没有使用外部样式。我已经尝试过 valign，但不幸的是它没有工作。
您是否通过使用预期输出构建它来测试没有该功能的电子邮件？我认为您不应该在此处包含该功能。
是的，我没有尝试过，我还在 Outlook 中检查了电子邮件的来源，它包含我编写的代码中的所有样式等，但是添加了很多 BR 标签，但是它们对于每个单元格都是相同的，因此如果这是问题所在，则所有单元格都应该未对齐。
你能在php后包含输出的代码吗？这比您问题中当前提供的单独代码更容易使用（我不是在谈论 Outlook 可能附加的额外内容）。只是 HTML 电子邮件代码，就像您在没有 php 的情况下构建它一样。
让我收回我之前的声明。我刚刚做了一个测试，如果我在第一个 TD 之前添加了一个 BR 标签，那么一切都可以对齐。我将更新我的问题@stuart Kershaw - 我现在已经使用内联样式放入代码，发送到 Outlook