停止导入的覆盖 CSS 的 html 内容答案

【问题标题】：Stopping imported html content overriding CSS停止导入的覆盖 CSS 的 html 内容
【发布时间】：2015-11-10 11:22:17
【问题描述】：

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

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

有没有一种方法可以创建一个 div，我可以在其中放置 html 电子邮件，其布局有效地表明“留在这个 div 中，不要乱搞其他任何事情”？

值得注意的是，我将 html 内容作为“文本”而不是指外部网站。（它实际上是一个 API 的返回，但假设同样的限制适用）

%iframe{srccode: @mail.html}

给我一个空白的 iframe

【问题讨论】：

与@Dave 的想法相同，您应该使用 iframe。

标签： html css haml

【解决方案1】：

使用类似于此的 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>

【讨论】：

我认为这绝对是正确的，但我在本地有 html 代码。
那么你也可以在本地引用你的 iframe
你可以用你身边适用的东西来引用它
尝试将php生成的文件保存在本地，我想你可能正在创建一个虚拟/动态页面。我不太了解php，所以无法真正帮助你。我们可能需要更多关于您如何生成电子邮件以获得帮助的详细信息

【解决方案2】：

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

<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/

【讨论】：

-1 没有说明浏览器完全支持此功能...除非您的所有用户都使用FireFox v21.0+，否则您不应将此作为唯一选择！见w3schools.com/tags/att_style_scoped.asp
好吧，我无法想象有人会在不完全了解其功能（或在这种情况下缺乏）的情况下实现某些东西。
仍然，建议使用未来 HTML 的一些实验性功能应该被声明为实验性的（我认为）。
另外，我在答案前面加上了“你也许可以……”。 OP 可能正在他知道浏览器功能的内部应用程序上实现此功能。或者更好的是，他使用诸如 Modernizr 之类的工具来决定是否根据浏览器功能实现此功能。关键是它是一个选项，一个完全有效的选项。
我的朋友，我不是在评判，我认为您的回答很好，并且“开箱即用的想法”，但缺少一点细节...建议编辑答案，如果你喜欢它。

【解决方案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 以适应就可以了。

【讨论】：