Question

我有一个电子邮件模板，我想在页面中呈现。电子邮件模板有自己的CSS，如：

Cocos run -p android

，当我尝试在我的网页上呈现电子邮件模板时，他们的CSS会覆盖我的页面CSS。如何解决这个压倒一切的问题？，我想像gmail一样渲染模板。

注意：不想在iframe中渲染。

Answer 1

您获得的错误是合乎逻辑的，因为网页和电子邮件模板都具有相同的样式标记名称，例如“body”标记，这两个方面都是。

你有两种方法 1）为电子邮件模板做所有内嵌样式（这很难做到）。要么 2）在html和CSS中更改电子邮件模板的样式标记名称。（这是完成任务的简单方法，只需在电子邮件模板的html和css页面的每个样式标记之前添加“email”）。

然后在您的网页中创建一个div标签，其中包含适当的高度和宽度作为电子邮件模板，并将模板放入其中。

Answer 2

选项1 在进行电子邮件样式设置时，请将样式保持内联。虽然今天许多电子邮件客户端都支持CSS，但防止它们干扰页面其余部分的最佳方法是将样式限制在单个单元格中。

从本质上讲，你会有很多：

<td style="font-size:20px">
    content here
</td>

选项2 如果由于某种原因无法更改电子邮件HTML，另一种方法是使页面CSS更加严格，并更加针对页面上的特定元素。

假设您的页面有标题，主要内容和页脚，并且电子邮件出现在主要内容的某个部分中，您应该为每个块提供ID。然后，您的页面CSS可能如下所示：

/***
 * Header
 ***/
#header {
    font-size:16px;
}
#header-nav {
    font-size:15px;
}
#header-nav > a { /* affects all links inside header-nav */
    font-size:14px;
}

/***
 * Main Content
 ***/
#main {
    font-size:18px;
}
#email-section {
    /* we expect font-size of the email to be declared within itself.
       And we are not worried that its style would overwrite any other
     */
}
#some-other-section {
    font-size:14px;
}
#some-other-section > p { /* all paragraphs in this section */
    font-size:16px;
}

/***
 * Footer
 ***/
#footer {
    font-size: 16px
}

如果您遵循这一针对您的CSS非常具体地定位元素的原则，那么在将外部样式表导入页面时通常无需担心。

通常，您会看到人们使用过于宽松的选择器规则，这些规则适用于太多事情。 CSS开发人员很好地理解级联和特异性非常重要。

如何在页面中呈现电子邮件模板？

2 个答案: