Question

我正在页面中显示HTML电子邮件，而且通常会提供我需要与主页隔离的一般样式信息。例如，如果电子邮件看起来像这样：

<style type="text/css">
body { background-color:#000; }
</style>
<div>
  email's content here
<div>

我最后在整个页面上都是黑色背景。

我已经尝试了iframe，但是我需要内容的高度是动态的（我不知道每个电子邮件在呈现之前有多大），这似乎只能用javascript来实现。这是一个选择，但它似乎相当hacky。这样做有标准，干净的方法吗？

Answer 1

如果您的约束允许，您可以在自己的iframe中显示每封电子邮件。

Answer 2

在包含div上放置一个唯一的类或ID，并将其用作所有样式的选择器：

<style type="text/css">
    div#emailcontent { ... }
</style>

<div id="emailcontent">
   ...
</div>

这有点痛苦，但这是将样式限制为仅部分页面的唯一方法。

Answer 3

对于HTML电子邮件，我建议使用内联CSS。有时，唯一的类或ID不适用于其他电子邮件客户端。并且不要在电子邮件中使用java脚本，在电子邮件营销中使用javascript是不可接受的。请使用内联代码对每个标签进行硬编码以与交叉电子邮件客户端兼容。

p标签应转换为span标签;在跨浏览器中，p标签给出一些填充和边距。如果你想使用，p标签适用于段落的整个部分。确保在每个标记中定义内联代码，如：

＆LT; span class =“headlines”style =“font-family：Arial，Helvetica，sans-serif; font-size：13px; font-weight：normal; color：＃03588c; line-height：18px;”＆gt; foo＆lt; /跨度＆GT;

Margin和Padding不应该用于CSS的css编码。这在跨电子邮件客户端中不起作用。

从页面的其余部分隔离元素中的CSS

3 个答案: