【问题标题】:CSS won't work in email bodyCSS 在电子邮件正文中不起作用
【发布时间】:2015-04-05 07:20:36
【问题描述】:

我在我的网站上按下一个按钮后发送一封邮件,我在这封邮件中发送的正文是用 HTML 和 CSS 制作的,因为我需要一些格式。现在的问题是并非所有的 CSS 都可以正常工作,我还在邮件中启用了 HTML,所以这不是问题。它主要是在表格中着色和填充,这是行不通的。在一个全新的项目上测试它时,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 行不工作?您是否也测试过不同的浏览器和不同的邮件客户端?
  • 一个拼写错误:“Vesandformular”应改为“Versandformular”。
  • 哦,对不起:我会尽快解决的。

标签: c# html css asp.net-mvc email


【解决方案1】:

不要将 CSS 放在 HTML 电子邮件的 HEAD 标记中,而应使用内联“样式”。 建议这样做是因为大多数邮件客户端将 html 电子邮件代码的正文和头部分开。

查看https://www.campaignmonitor.com/css/,它将根据您使用的电子邮件客户端(Gmail、雅虎、Outlook 等)引导您到可以在电子邮件正文中显示的 CSS

编辑: 改变:

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

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

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

【讨论】:

  • 我只需要使用 Outlook 2013 和 2010,从您的列表中我可以看出我使用的 ccs 应该可以在 Outlook 中使用。无论如何感谢您的链接,我认为我将来可以使用它:)
猜你喜欢
  • 1970-01-01
  • 2013-04-10
  • 2020-11-04
  • 1970-01-01
  • 1970-01-01
  • 2021-02-10
  • 1970-01-01
  • 2023-03-03
  • 2011-12-09
相关资源
最近更新 更多