css在我的JavaScript小部件與目標頁面css碰撞

Question

我已經寫了一個非常基本的投票部件，用戶只需在代碼底部添加JavaScript代碼就可以像Google分析代碼那樣安裝它。

我在使用廣泛的CSS規則的一些頁面上現在已經注意到一個問題，那就是小部件的設計有點搞砸了。在我的小部件CSS中，我指定了唯一的名稱，所以不應該是個問題。

然而，當目標頁面使用規則，如：

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

它影響我的窗口小部件的外觀。

任何想法我可以解決這個問題？

編輯：我已經試過cleanslate - https://github.com/premasagar/cleanslate 但這復位目標頁面的CSS以及

Answer 1

把你的小工具的iframe，那麼它將不會被目標什麼影響頁。

Answer 2

使用!important爲您的小部件的CSS。

例子：

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

Answer 3

使用iframe或使用內聯CSS爲你的元素。