CSS 不适用于电子邮件正文

CSS won't work in email body

我在我的网站上按下一个按钮后发送了一封邮件,我在这封邮件中发送的正文是用 HTML 和 CSS 制作的,因为我需要在其中进行一些格式化。现在的问题是并非所有 CSS 都有效,我还在邮件中启用了 HTML 所以这不是问题所在。它主要是 table 中的着色和填充,这是行不通的。在一个全新的项目上测试它时,HTML 和 CSS 有效。

我正在使用 C# 和 ASP.NET。

这是我使用的代码:`

        lMessage.Subject = "Versandformular";

        lMessage.IsBodyHtml = true;

        lMessage.Body = "<html>" +
                            "<head>" +
                            "    <title>Versandformular</title>" +
                            "    <style>" +
                            "        body {" +
                            "            font-family: Verdana;" +
                            "        }" +
                            "        .artikel > table td, .artikel > table th, .artikel > table {" +
                            "            border: 1px;" +
                            "            border-style: solid;" +
                            "            border-collapse: collapse;" +
                            "            padding: 5px;" +
                            "            padding-right: 40px;" +
                            "            max-width: 350px;" +
                            "            text-align: left;" +
                            "        }" +
                            "        .versand {" +
                            "            border: none;" +
                            "        }" +
                            "        .artikel .versand {" +
                            "            width: 350px;" +
                            "        }" +
                            "    </style>" +
                            "</head>" +
                            "<body>" +
                            "    <h2>" +
                            "        Versandformular" +
                            "    </h2>" +
                            "    <div class='container'>" +
                            "        <div class='absender'>" +
                            "            <b>Absender:</b><br />" +
                            "            John Doe<br />" +
                            "            Some street<br />" +
                            "            Some city <br />" +
                            "           01234 / 567890" +
                            "        </div>" +
                            "        <br />" +
                            "        <div class='empfaenger'>" +
                            "            <b>Empfänger</b><br />" +
                            "            Max Mustermann GmbH & Co. KG<br />" +
                            "            Max Mustermann<br />" +
                            "            01234 / 5678910<br />" +
                            "            max.mustermann@mail.de<br />" +
                            "            Musterstraße 123<br />" +
                            "            12345 Musterstadt<br />" +
                            "            Deutschland<br />" +
                            "            Bundesstaat: Keine Angabe<br />" +
                            "            Bemerkungen:<br />" +
                            "            <div class='empf-bemerkung'>" +
                            "            </div>" +
                            "        </div>" +
                            "        <br />" +
                            "        <div class='versand'>" +
                            "            <b>Versand</b>" +
                            "            <table>" +
                            "                <tr>" +
                            "                    <td>Versandart</td>" +
                            "                    <td>Dokumentsendung EU</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Versanddienst</td>" +
                            "                    <td>Standard</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Bemerkungen</td>" +
                            "                    <td>Irgendetwas was mit dem Versand zu tun hat</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Nächsten Lieferung beipacken?</td>" +
                            "                    <td>Ja</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Termin bis:</td>" +
                            "                    <td></td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Warenkosten Zahlung</td>" +
                            "                    <td>Proforma</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Kostenträger</td>" +
                            "                    <td>Absender</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Kostenstelle</td>" +
                            "                    <td>IT</td>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>Tracking angeforderdert?</td>" +
                            "                    <td>Ja</td>" +
                            "                </tr>" +
                            "            </table>" +
                            "        </div>" +
                            "        <br />" +
                            "        <div class='artikel'>" +
                            "            <b>Artikel</b>" +
                            "            <table>" +
                            "                <tr>" +
                            "                    <th>#</th>" +
                            "                    <th>ArtikelNr</th>" +
                            "                    <th>WarentarifNr</th>" +
                            "                    <th>Menge</th>" +
                            "                    <th>Preis</th>" +
                            "                    <th>Beschreibung</th>" +
                            "                </tr>" +
                            "                <tr>" +
                            "                    <td>1</td>" +
                            "                    <td>1234567890</td>" +
                            "                    <td>1234 5678</td>" +
                            "                    <td>5 Stk.</td>" +
                            "                    <td>5€</td>" +
                            "                    <td>Jede Menge Schrauben</td>" +
                            "                </tr> " +
                            "            </table>" +
                            "        </div>" +
                            "    </div>" +
                            "</body>" +
                            "</html>";`  

这些样式不起作用:

    border: 1px;
    border-style: solid;
    border-collapse: collapse;
    padding: 5px;
    padding-right: 40px;
    max-width: 350px;

最后我基本上只是添加发件人、收件人和一个 PDF 附件(如果有的话)。此外,它只是填充了一些文本来测试它。 我只在 Internet Explorer 和 Outlook 2013 和 2010 中测试过。因为我只需要这些。

不要将 CSS 放在 HTML 电子邮件的 HEAD 标签内,而是使用内联 "style"。 建议这样做,因为大多数邮件客户端将 html 电子邮件代码的主体和头部分开。

看看 https://www.campaignmonitor.com/css/ 它会引导您到 css 您可以根据您使用的电子邮件客户端(Gmail、yahoo、outlook 等)显示在电子邮件正文中。

编辑: 变化:

.artikel > table td, .artikel > table th, .artikel > table

.artikel table td, .artikel table th, .artikel table

在 url 中指出在选择器中使用“>”在 Outlook 中不起作用。 Html 在 http://jsfiddle.net/3gL29qhL/