javascript - 我的 JavaScript 小部件中的 css 与目标页面 css 冲突

Question

我为投票编写了一个非常基本的小部件，用户只需在代码底部添加 JavaScript 代码即可安装它，就像 Google 分析代码一样。

我现在在一些使用广泛 CSS 规则的页面上注意到的一个问题是小部件设计有点混乱。在我的小部件 CSS 中，我指定了唯一名称，所以这应该不是问题。

但是，当目标页面使用以下规则时：

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

它会影响我的小部件的外观。

有什么想法可以解决这个问题吗？

编辑：我已经尝试过 cleanslate - https://github.com/premasagar/cleanslate 但这也会重置目标页面上的 css

Answer 1

为您的元素使用 Iframe 或内联 CSS。

Answer 2

用于!important小部件的 css。

例子：

.widget {
    font: 16px Arial !important;
}

Answer 3

将您的小部件放在 iframe 中，这样它就不会受到目标页面上的任何内容的影响。