防止页面CSS影响Chrome扩展CSS

我有一个Chrome扩展，它在每个页面中插入一个DIV，并使用扩展中包含的样式表创建DIV样式。在某些页面上，注入的DIV看起来与预期的一样，但在其他页面上则没有。例如，在StackOverflow站点中，my元素的

框阴影

属性被覆盖，尽管它被指定为

！重要信息

在我的CSS中

当我检查有问题的元素时，Chrome告诉我没有应用

框阴影

属性（它被划破显示），但它没有告诉我原因：样式级联中没有指定该属性

当我将

box shadow

属性直接添加到元素时（没有CSS类的好处），CSS检查器视图显示属性与元素关联，但效果仍然不存在

更新：代码片段：

以下是我在代码中指定的内容：

    var $bar = $('<div>').addClass('pp_bar').css({
        'box-shadow': '-1px 0px 2px 1px #444',
        '-moz-box-shadow': '-1px 0px 2px 1px #444',
        '-webkit-box-shadow': '-1px 0px 2px 1px #444'
    });

以下是Chrome显示的计算样式：

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

-webkit-box-shadow: #444 -1px 1px 2px 1px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

您可以看到所使用的值（

4440px 0px 1.2000000476837158px 0px

）不同于元素样式（如我的代码中指定的；元素样式高于类值（它们是相同的）。如果没有元素样式设置，则显示的类值将被删除

在正常工作的站点上，浏览器以计算样式报告以下内容：

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

-webkit-box-shadow: #444 -1px 1px 2px 1px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

---

下一步我应该尝试什么？

使用

！important

标志设置元素本身的样式。然后，您可以确定该样式正在以最高优先级应用于元素

示例：

var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';

// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';

---

如果您无法设置内联样式，请尝试在CSS选择器上实现更高的优先级，例如包括一个ID。

我的理解是，内联样式已经具有最高优先级，并且浏览器确实显示内联样式，没有删除。（但也没有执行任何操作。）我对正在发生的事情感到困惑。@GeneGolovchinsky展示了一个演示您的问题的小示例。我没有时间从头开始重新创建您的问题。我添加了一些代码片段。我不确定构建整个扩展是否可行，但如果必要，我可以添加错误行为的屏幕截图。请注意，这种奇怪的行为多个站点上的curs；stackoverflow就是一个例子。@GeneGolovchinsky至少要提到您正在检查的堆栈溢出上的哪个元素。如果可能，您最好创建一个自包含的示例来演示问题，以供将来参考。受此影响的元素由我的chrome扩展注入；它们不会出现在网页中。我将尝试组合一个简短的chrome扩展，但部署这些扩展有点麻烦。我开始看到类似的东西，但对我来说，样式表甚至没有加载，而且只在一些网站上。你能告诉我你的div是否应用了用户样式表吗？请查看计算样式下的样式表列表：是吗r列出的CSS？可能重复的