封装css

我正在做一个报告，并在报告中，我必须呈现来自不同提供商的电子邮件，这封电子邮件带有自己的css（通常是内联css，但有时他们适用一般样式）。我通常使用iframe来封装css，所以它不会打破我的，但我现在不能使用它。封装css

有没有一种方法来封装css而不使用iframes？

这里是我遇到的问题的一个例子：

<html> 
    <head> 
    <style> 
     // I enclose it to content so it doesn't override the email css 
     #my_content table, #my_content p { 
     color: black; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='my_content'> 
     ... some stuff ... 
    <div id='email'> 
     <html> 
      <head> 
      <style> 
       table { 
       margin-left: 100cm; // screws up all my tables 
       } 
       .... some styles that should only apply inside the email div ... 
      </style> 
      </head> 
      <body> 
      .... email content ... 
      </body> 
     </html> 
     </div> 
    </div> 
    </body> 
</html>

我可以提取HTML结构和刚刚得到什么的对身体，但再不是所有我的电子邮件会看，因为它应该。此外，该HTML必须是有效的，所以任何建议将是伟大的！

来源

2012-08-28 Hassek

所以你不使用类？ – ChaosPandion

是的！使用'scoped'属性。然而，我不相信它支持任何地方。（好吧，你可以在Chrome浏览器中用'chrome：// flags'打开它。） – Ryan

我确实使用了类，让我在问题中更好地解释电子邮件如何破坏我的css – Hassek

你可以尝试检查电子邮件的css部分是否与你自己的类名冲突。我刚刚发现这个帖子里面能为您有所帮助： Listing known CSS classes using Javascript

来源

2012-08-28 20:15:49 Andre

一旦完成了，他应该怎么做？ –

我明白了，他可以试着用稍微修改过的标识符来替换那些碰撞，但那不会像只像hayk一样简单地使用css。 mart – Andre

您可以在前面加上#email你的CSS选择器，使它们只适用于您的股利。

例如，更改

.classname { display: block }

到

#email .classname { display: block }

编辑：如果你有超过电子邮件CSS没有控制，arxanas建议，可以考虑使用LESS。 Less是允许嵌套CSS选择器的CSS预处理器。如果包括less.js，那么你可以做这样的事情：

#email { 
    CSS goes here 
}

less.js将解析这个并将其转换为CSS。

来源

2012-08-28 20:16:04

我认为问题在于样式正在加载并且他无法控制它们。 –

感谢arxanas的澄清，我为此增加了一个建议O操作。 –

是的我是无法控制的css因为是电子邮件的一部分 – Hassek

回答

相关问题