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

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

<style>
body{
   font-size : 20px;
}
</style>

身体{
字体大小：20px；
}

---

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

---

注意：不希望在iframe内渲染。

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

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

---

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

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

本质上，你会有很多：

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

如果您遵循这一原则，即使用CSS非常明确地定位元素，那么在将外部样式表导入页面时，您通常不必担心什么

---

通常，您会看到人们使用太松散的选择器规则，这些规则适用于太多的事情。CSS开发人员充分理解层叠和特殊性是很重要的。

如果邮件模板中有

正文，则应使用iframe。“当我试图在我的网页上呈现电子邮件模板时，他们的CSS覆盖了我的页面CSS”-->“他们”中的“他们”是谁？@电子邮件模板附带的轻型CSS覆盖了我的页面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
}