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/
我在我的网站上按下一个按钮后发送了一封邮件,我在这封邮件中发送的正文是用 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/