Outlook 2013 中的 HTML 电子邮件未对齐?

标签 html css email outlook vertical-alignment

我有一个非常简单的 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 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 标签有关,但我该怎么办?

谢谢!

最佳答案

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

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

您也可以尝试关闭嵌套在标签中的任何空格,例如:

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

关于Outlook 2013 中的 HTML 电子邮件未对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19497925/

相关文章:

javascript - 检查具有事件类的元素并向下滑动它下面的下一个元素

php - 在 Zend 框架上通过 SMTP 发送电子邮件

javascript - jquery 在奇数 tr 中更改 td 的 css

javascript - 从另一个文件调用函数

html - 两个图像在彼此之上

php - Ajax成功后渲染html的特定部分

html - 如果图像的 src 和 div 的背景图像中都使用了图像,浏览器会下载图像两次吗?

email - 支持邮件格式: plain-text or HTML?

php - 在 PHP 中创建电子邮件队列?

javascript - <select> onchange 选择不改变