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

Question

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

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

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

注意:不想在 iframe 内呈现。

Answer 1

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

本质上，你会有很多:

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

选项 2 如果您出于某种原因无法更改电子邮件 HTML，另一种方法是调整您的页面 CSS 以使其更严格，并且更有针对性地针对页面上的特定元素。

假设您的页面有一个页眉、一个主要内容和一个页脚，并且电子邮件出现在您的主要内容的一个部分中，您应该为这些 block 中的每一个指定一个 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 开发人员充分了解级联和特异性非常重要。