Node.js使用Nodemailer发送HTML邮件时样式失效如何适配？

问题背景 #

我有一个使用Nodemailer发送邮件的Node.js程序，最初仅发送带边框颜色等基础样式的纯数据表格，现在想要丰富邮件的展示效果。我先在浏览器中编写调试HTML代码，确认效果后将其嵌入到邮件内容中，但给自己发送测试邮件时，发现实际显示效果和浏览器中预览的差异非常大。我查询得知height属性在HTML邮件中是完全支持的，因此不理解为何样式偏差这么大，初始阶段仅剩background-image属性未成功生效。

原始HTML代码 #

<html>
    <head>
        <style>
            table {
                font-family: arial, sans-serif;
                border-collapse: collapse;
            }
            td {
                border-bottom-style: solid;
                border-color: #dddddd;
                border-bottom-width: 1px;
                text-align: left;
                padding-top: 13px;
                padding-right: 14px;
            }
            th {
                padding: 8px;
            }
            .image {
                width: 293px;
                height: 80px;
                background-image: url(data:image/png;base64, DATA);
                background-size: contain;
                margin: 0 auto;
            }
            .topper {
                background-color: #003d8f;
                width: 100%;
                height: 80px;
                color: white;
                font-family: sans-serif;
                text-align: center;
            }
            .topper h1 {
                padding-top: 20px;
            }
            .content {
                margin: 0 auto;
                width: fit-content;
            }
            .footer p {
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
                color: gray;
                font-size: small;
            }
        </style>
    </head>
    <body>
        <div class="topper">
            <h1>Some Text Here</h1>
        </div>
        <br />
        <div class="content">
            <div class="image"></div>
            <br />
            <br />
            <br />
            <table>
                <tr>
                    <td>Table:</td>
                    <td><b>DataDataDataDataDataData</b></td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>DataDataDataDataDataData</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>DataDataDataDataDataData</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>DataDataDataDataDataData</td>
                </tr>
                <tr>
                    <td>Table:</td>
                    <td>DataDataDataDataDataData</td>
                </tr>
            </table>
            <br />
            <br />
        </div>
        <br />
        <br />
        <br />
        <hr/ style="border-top: 1px solid #e2e1e1; border-left: 0px">
        <div class="footer content">
            <p>Here is a longer sentence. Here are a few information about the email.</p>
            <p>Here is a longer sentence. Here are a few information about the email. This sentence is even longer but it should be.</p>
        </div>
    </body>
</html>

已确认的异常点 #

• .topper的height: 80px属性不生效
• .image类的背景图无法加载
• table和p元素使用margin: 0 auto;width: fit-content;无法居中
• p元素无法展示小号灰色字体效果
• hr元素显示样式不符合预期

已解决问题的处理方案 #

1. 将.footer p {选择器改为p{，同时把font-size: small改为font-size: 14px，底部文字大小和颜色已恢复正常
2. 给table、.image、p添加display: inline-block;属性，给.content添加text-align: center;属性，元素已可正常居中
3. 多类名如footer content不被支持，改为仅使用content类名后p元素已可正常居中
4. 移除.image的background-image和background-size属性，将对应div改为img标签，src设置为cid:logo，同时在Nodemailer配置中添加如下代码即可正常展示图片：

attachments: [{
                filename: 'logo.png',
                path: __dirname + "\\logo.png",
                cid: "logo"
            }]

剩余问题修复方案 #

• .topper高度不生效修复：多数邮件客户端对块级元素单独设置的height属性支持度较低，建议使用内边距撑开高度，同时所有样式改用内联写法避免头部style被过滤，参考代码：

<div style="background-color: #003d8f;width: 100%;padding: 28px 0;color: white;font-family: sans-serif;text-align: center;">
    <h1 style="margin:0;font-size:24px;">Some Text Here</h1>
</div>

上下padding加上h1的高度总和刚好等于80px，兼容性远高于直接设置height属性。

• hr样式异常修复：邮件客户端对hr的默认边框样式重置支持度差，优先推荐用div模拟分割线，代码如下：

<div style="width:100%;height:1px;background-color:#e2e1e1;margin: 20px 0;"></div>

如果要保留hr元素，需要在标签内添加内联样式并重置默认border：

<hr style="border:none;border-top:1px solid #e2e1e1;margin:20px 0;">

额外优化建议 #

所有HTML邮件的样式尽量都写在元素的style内联属性中，多数邮件客户端会过滤<head>标签内的样式代码；尽量避免使用CSS新特性、背景图、多类名选择器、相对单位，复杂布局优先使用table实现兼容性更好。

内容的提问来源于stack exchange，提问作者somedude324334