HTML 电子邮件内容的 css 未在 gmail 中应用

Question

我正在尝试为 HTML 电子邮件内容准备标记。我有一张如下所示的表格。在 gmail(移动和 Web)应用程序中查看时，表格的样式未得到应用。此外，在 Apple 邮件中测试时，此表的样式未得到应用。谁能帮忙。

https://jsfiddle.net/Anifa/puyddvmy/

<table cellspacing="0" cellpadding="0" border="0" width="100%" id="txn-info-container" style="padding: 0px 0px 0px 0px">
    <tr>
        <td width="25">
        </td>
        <td width="550">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>label</td>
                        <td>Value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td width="25">
        </td>
    </tr>
</table>

#txn-info-container table {
    max-width: 550px;
    width: 100%;
    background-color: #F7F6F6;
    border-top: 1px solid #dfdddc;
}
#txn-info-container table td {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #dfdddc;
    font-family: 'Roboto', 'Arial', 'Helvetica';
    font-size: 12px;
    /* text-indent: 10px; */
    Margin-left: 10px;
    padding-left: 10px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #txn-info-container table  {
    Margin-left: 0px!important;
    }
} 

注意:我在样式标签中编写所有 css，并使用 inline-css 节点模块包以编程方式将其内联。所有的 head 和 style 标签都被删除，只有内联的 css 样式适用

Answer 1

您不能在电子邮件中按 id 或类使用样式，如果您想为电子邮件设置样式，则必须在标签内设置样式。

举个简单的例子:

<a style="color:white;background:black;padding:20px;">This Link</a>

并且不要忘记在标题上设置 Content-type:text/html;charset=UTF-8。