javascript - 防止元素被 CSS 操纵

Question

我目前正在构建一个小型广告网络，主要用于我们自己的网站。

广告是通过在网站上包含脚本来加载的，例如...

<script src="http://someurl.com/somejs.js"></script>

在我放置脚本行的任何地方，它都会被替换为广告内容，在带内联样式的内部。必须的广告将是 HTML，这就是困扰我的问题......

例如，假设广告内容是这样的

<div style="height: 150px; width: 90px; overflow: hidden; display: inline-block;"><p>Buy cheap buttons</p><p><img src="deliciousButtons.png" /></p></div>

然后假设内容已加载到网页中，某人的样式表中包含以下内容:

img { border: 1px solid red; }

现在广告中的图片有红色边框 - 真可惜。

我唯一的解决方案是使用 iframe...但是，我从来都不喜欢 iframe。

是否有一个 html 元素，您可以在其中放置 HTML 并且放置在其中的所有内容都不受任何样式表首选项的影响 - 仅内联样式？

... 如果没有。关于如何做的任何建议？没有 iframe :)

Answer 1

您可以覆盖继承的样式，但要使其正常工作，您需要覆盖所有可能的 CSS 选项，并可能将此类覆盖标记为 !important，真的，iframe 是实现此目的的最佳方式，另一种可能性是使用静态图像或 flash，但我想这也是可能的选择。