停止导入 html 内容覆盖 CSS

Question

我的网站上有一个页面显示 HTML 电子邮件。

其中一些电子邮件似乎带有 CSS，它覆盖了我的网站布局，因此某些内容被放错了位置... 例如我在页面顶部有一个工具栏，在某些邮件中涵盖了来自电子邮件的各种 header 信息。

有没有一种方法可以创建一个 div，我可以在其中放置 html 电子邮件，其布局有效地表明“留在这个 div 中，不要乱搞还有什么吗？

值得注意的是，我将 html 内容作为 'text' 而不是引用外部网站。（它实际上是来自 API 的 return，但假设适用相同的限制）

%iframe{srccode: @mail.html}

给我一个空白的 iframe

Answer 1

您也许可以合并范围样式：

<div>
  <style scoped>
    h1 { color: FireBrick;   }
    p  { color: SaddleBrown; }
  </style>
  <h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
  <p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>

<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>

值得注意的是：此功能仍处于实验阶段，2015 版浏览器并未广泛支持，目前只有 FireFox v21.0+ 支持此功能。 (more info @ w3school.com)

参考：https://css-tricks.com/saving-the-day-with-scoped-css/

Answer 2

使用类似于此的 IFrame 包含您的邮件：

<iframe src="http://www.w3schools.com"></iframe>

这将使样式保持独立

有关自定义 IFrame 的选项，请参阅 http://www.w3schools.com/tags/tag_iframe.asp

如果使用 html 作为文本（而不是引用现有页面：

%iframe{srcdoc: "#{@mail.html}"} #for rails / haml

或

<iframe srcdoc="<your html as text>"></iframe>

Answer 3

戴夫上面的回答

<iframe src="http://www.w3schools.com"></iframe>

适合引用外部站点或以 html.

形式存在的页面

如果使用 html 作为文本（而不是引用现有页面）：

%iframe{srcdoc: "#{@mail.html}"} #for rails / haml

或

<iframe srcdoc="<your html as text>"></iframe>

然后格式化 iframe 以适应它。

停止导入 html 内容覆盖 CSS

Stopping imported html content overriding CSS

html

css

haml