我用ajax获取的html覆盖了我的样式

Question

我正在构建一个群发邮件系统，您可以在发送邮件之前查看该邮件的预览。我使用jquery - $().html(theHtml).

将电子邮件html渲染到预览框中

Html电子邮件使用所有内联css作为其样式。当我填写html时，它会覆盖我的一些CSS。

我正在寻找一种完全阻止这种情况发生的解决方案。有没有办法自己包含电子邮件html / css所以它不会影响整个文档？

我知道在我的样式中添加！important会起到作用，但它不是一个非常可扩展的选项。

提前致谢。

Answer 1

不幸的是！重要的是覆盖内联样式的唯一方法 - 这就是特异性的工作方式。

然而，您可以通过使用ID和类等使所有“包装”CSS（例如，您的页面的CSS，而不是HTML电子邮件预览）更具体来解决它，以便它们的样式不会被HTML电子邮件中嵌入的泛型样式声明覆盖。

我有点困惑 - 你是否试图覆盖“内联”样式（如在style =“your css here”属性中的元素）或嵌入式CSS（例如“你的css在这里”）？如果是后者，只需在自己的CSS中使重要的东西更具体。

有关特异性的更多信息：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

使用iframe作为Sander建议可能比尝试重构CSS特异性规则更简单。

Answer 2

您是否为自己的网站和电子邮件使用了相同的class / id个名称？情况并非如此。

Answer 3

我强烈建议您使用pseudo-namespace作为CSS。

基本上，在CSS中添加一个不会包含在内联第三方内容中的任意前缀：<div class='foo'>变为<div class='myapp-foo'>

最近在我们的项目中使用了这种做法，它只需要更多的纪律，但使应用程序更易于管理以嵌入其他内容。