SendGrid for Outlook 不考虑 HTML 电子邮件填充

Question

我正在通过 SendGrid 发送电子邮件并尝试使用动态模板。 这方面的前景令人抓狂......

我的模板之一中有此代码部分：

<div class="contentSection"> 
    <table>
    <tbody>
        <tr>
            <td class="purchaseQty" style="font-weight: bold">QTY</td>
            <td class="purchaseFill" style="font-weight: bold">ITEM</td>
            <td class="purchaseCurrency" style="font-weight: bold">COST (USD)</td>
        </tr>
        {{#each items}}
        <tr>
            <td class="purchaseQty">
                <div style="margin-bottom: 3px; font-weight: bold">{{this.quantity}}</div>
            </td>
            <td class="purchaseFill">
                <div style="margin-bottom: 3px; font-weight: bold">
                    {{this.itemName}}{{this.quantityUpdate}}{{this.licenseUpdate}}
                    {{#unless this.features}}
                    {{this.featureUpdate}}
                    {{/unless}}
                </div>
                <div>Expires: {{this.expiration}}{{this.expiryUpdate}}</div>
                {{#if this.features}}
                <div>Features: {{this.features}}{{this.featureUpdate}}</div>
                {{/if}}
                <div>Key: {{this.key}}</div>
                {{#if this.errorString}}
                <div class="errorDivWrapper">
                    <div class="errorDiv" style="padding: 10px">Warning! There were some errors processing this license, please contact Revolution Design for support.</div>
                </div>
                {{/if}}
            </td>
            <td class="purchaseCurrency">
                <div style="font-weight: bold">{{this.itemCost}}</div>
                {{#if this.discount}}
                <div style="color: red; font-size: 12px; font-style: italic">(-{{this.discount}})</div>
                {{/if}}
            </td>
        </tr>
        {{/each}}
    </tbody>
    </table>
</div>

它使用自定义头中的这些样式：

.contentSection{
    margin: 0px 40px 10px 40px;
    font-family: inherit;
}

.purchaseQty{
    width: 10%;
    padding-right: 5px;
    padding-bottom: 20px;
    vertical-align: top;
}

.purchaseFill{
    width: 60%;
    padding-right: 5px;
    padding-bottom: 20px;
}

.purchaseCurrency{
    width: 30%;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 40px;
    padding-bottom: 20px;
    align-content: baseline;
    text-align: right;
}

.errorDivWrapper{
    border: 1px solid black;
    border-radius: 3px;
    background-color: wheat;
}

.errorDiv{
    padding: 20px;
}

在此处设置后，Outlook 看起来是正确的；该部分主要部分的右边缘与文本右侧之间的距离为 40 px。 但是，当我发送到雅虎或其他邮件时，那里有 80px。 雅虎在这里实际上是正确的，因为内容部分应该有 40 像素的边距，单元格中应该有 40 像素的填充。 我可以取出其中之一并将其设置为 40 像素，但 Outlook 给我的是 0 像素。

我已经尝试过：

1. 将外部部分设为表格而不是 div。
2. 直接将表格宽度设置为 520px（600 减去 2 40px 边距）。
3. 设置和取消设置表格宽度。
4. 在主 div 上使用内边距而不是边距。
5. 通过 width 属性和 style 属性设置表格的宽度。

我觉得也许还有一两件事，但我现在不记得了。 无论我做什么，Outlook 都不会识别与 Yahoo 相同的内容，无论是其中之一都是错误的。

到底如何才能让它在两者中正确显示？？？

Answer 1

好吧，经过多次挫折后，我找到了一些可行的方法。 显然它不喜欢

div

中的填充或边距。我最终不得不完全取消

contentSection

的边距。 然后我在

purchaseQty

和

purchaseCurrency

中放置 40 像素的左右内边距。 这似乎在两个系统中都能正确识别。

现在剩下的（反问）问题是，为什么微软自 1997 年以来就没有更新 Outlook 中的 HTML 系统......