在网站上显示电子邮件的 html 正文答案

【问题标题】：display html body of emails on a website在网站上显示电子邮件的 html 正文
【发布时间】：2012-05-21 11:00:45
【问题描述】：

我已将电子邮件正文的 html 保存到我的数据库中。现在我想在网站上显示这个 html。唯一的问题是，某些邮件的 css 定义会覆盖我网站上的整个定义。如何在不覆盖我的 html/css 的情况下显示这些邮件？

谢谢 rk

【问题讨论】：

你考虑过iframes吗？
如果您不想对当前的 css 进行任何更改，请使用 iframe。如果没有，您需要重写 html 电子邮件 css。也许只是将新 ID 添加到正文 <body id="email-body"> 或用新的 div ID 包装它
是的，但是如何将它添加到 iframe 中？例如，如果我使用以下 jquery $('').load(function(){ {{ mail.mailContent.body|raw|purify}} }).appendTo('#test');其中#test 是围绕 iframe 的 div 的 ID，我收到错误消息：

--------- 转发消息 --- --------
为了澄清您想要维护电子邮件和您的网站的 CSS 而不在两者之间进行任何 CSS 继承？那么是的，iFrame 将是要走的路。
但是如何将邮件正文添加到 iframe 中？对我来说，上述设置不起作用

【解决方案1】：

根据我使用电子邮件的经验，我会假设这些声明是内联编写的……最好的办法是将它们去掉。您可以尝试使用超长链选择器覆盖它们，例如在您的 html 元素和 body 元素上放置一个类，同时还应用 @jeff 所说的 !important 值。

【讨论】：

是的，它是内联 CSS。我对这些电子邮件没有任何影响，它们可能是来自任何来源的时事通讯。但是gmail是怎么做的呢？如果您正在查看 gmail，他们会按原样显示时事通讯......而不会破坏他们网站的整个 CSS
这不是“有效”的 html，但您也可以在插入 html 后在正文中添加 CSS。实际上，这将再次重新覆盖 css。
idk gmail 是如何做到的。对不起。我确定它与重置和全局样式表有关。请记住，这些电子邮件中的大多数都是 html2 或 3，基于表格的布局。 imo 语义和干净的标记甚至都没有发挥作用......只需放下并弄脏以获得您想要的效果

【解决方案2】：

在您的 CSS 中使用 !important 规则，有关详细信息，请参阅 http://www.w3.org/TR/CSS21/cascade.html#important-rules。

例子：

#test {border:1px solid green!important}

#test {border:1px solid red}

这个元素应该有一个绿色边框。

【讨论】：

【解决方案3】：

我建议使用 iframe，或者重写你的 css.. 对不起，伙计！

【讨论】：