html - Outlook 边框未解析

Question

我正在尝试制作一个 HTML 电子邮件模板(即使在最好的情况下也很困难)并且我正在尝试在标题和内容之间设置一条双线。我正在尝试使用边框样式来实现这一目标:

<div class="1"> header image </div>
<div class="2"> random text </div>

使用头部样式表:

.1 {
    margin:0;
    padding: 0;
    border-bottom:thin solid red;
}
.2 {
    margin:0;
    padding: 0;
    border-top:thin solid yellow;
}

它似乎在 WLM 和其他电子邮件客户端中运行良好，但在 Outlook 中却不行。

Answer 1

根据我使用电子邮件 HTML 和 Outlook 的经验，我发现我总是回到使用表格进行布局。许多不同的电子邮件客户端对 HTML 做了很多奇怪的事情，但表格布局似乎是最跨客户端兼容的。所以，考虑这样的事情:

<table cellpadding="0" cellspacing="0" width="100%" style="border-bottom: solid 1px red;">
    <tr>
        <td> header image </td>
   </tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-top: solid 1px yellow;">
    <tr>
        <td> random text </td>
   </tr>
</table>

我还没有测试过这个，但这是我首先要尝试的。