Firefox 扩展中工具提示的样式表答案

【问题标题】：Stylesheet for tooltip in firefox extensionFirefox 扩展中工具提示的样式表
【发布时间】：2011-11-03 15:34:08
【问题描述】：

我开发了一个 Firefox 扩展来显示一些不寻常的词的解释。我的问题是我的工具提示被当前页面的其他样式表修改。因此，在某些页面上，我的样式表看起来不错，而在某些页面上则完全一团糟。有没有办法将我的样式表限制为我的工具提示注释，以便网页中的样式表不会影响我的？

我正在以这种方式加载我的样式表：

initTooltipStyle: function(on) {
        var sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);

        var uri = makeURI("resource://tooltip/tooltip.css");
        if (sss.sheetRegistered(uri, sss.USER_SHEET))
            sss.unregisterSheet(uri, sss.USER_SHEET);
        if (on)
            sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
},

【问题讨论】：

你在你的风格中使用!important吗？
我在每种风格中都使用 !important，但仍然遇到冲突
详细调试它看起来问题没有分配选项。除了将所有可能的选项添加到我的样式表之外，还有其他解决方案吗？

标签： firefox firefox-addon stylesheet

【解决方案1】：

我遇到过这个问题。大多数情况下，您未应用于元素的样式属性很容易被网页覆盖。例如，如果您没有为您的 div 元素声明边距并且网页已声明 div{margin:0;} 您的元素也将继承它。尝试将 reset.css 添加到您的元素（http://meyerweb.com/eric/tools/css/reset/）。

然后尝试将您的元素添加到页面的根元素而不是正文中。 document.documentElement.appendChild()。这些技术帮助了我。

希望有帮助！

【讨论】：