阻止页面CSS影响Chrome扩展CSS

我有一个Chrome插件，它向每个页面注入一个DIV，并且使用扩展中包含的样式表格来设置DIV的样式。在一些页面上，注入的DIV看起来是有意的，但在其他页面上则没有。例如，一个StackOverflow站点，我的元素的box-shadow属性被覆盖，尽管它在我的CSS中被指定为! important。阻止页面CSS影响Chrome扩展CSS

当我检查有问题的元素时，Chrome告诉我box-shadow属性未应用（它显示为直通），但它没有告诉我为什么：级联样式中没有任何内容指定该属性。

当我将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' 
    });

这里是CSS：

.pp_bar { 
    height: 80%; 
    right: -4px; 
    top: 0px; 
    position: absolute; 
    box-shadow: -1px 0px 2px 1px #444 ! important; 
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! important; 
    -moz-box-shadow: -1px 1px 2px 1px #444 ! important; 
}

下面是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

您可以看到使用的值（#444 0px 0px 1.2000000476837158px 0px）与元素样式（在我的代码中分配;元素样式会覆盖类的值（它们是相同的）。如果没有元素样式设置，则会显示类值。

的网站在此工作正常，浏览器报告在计算样式如下：

-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

我应该尝试下？

来源

2012-10-18 Gene Golovchinsky

我已经开始看到类似的东西，但对我来说，样式表甚至没有加载，只在某些网站上。你能否告诉你的div是否有应用于它的用户样式表？查看计算样式下的样式表列表：是否列出了您的CSS？ – Eyal

[如何真正隔离Google Chrome扩展中的样式表？]（http://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension） – anderspitman

使用!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>';

非例子（不不工作！）：

div.style.boxShadow = '0 0 3px red !important'; // Does not work!

如果你不能设置内嵌样式，尝试实现了更高的specifity您CSS选择器，例如通过包含一个ID。

来源

2012-10-18 09:02:49

我的理解是内联样式已经具有最高优先级，并且浏览器确实显示内联样式没有被删除。（但没有采取任何行动。）我对发生的事情感到困惑。 –

@GeneGolovchinsky显示一个演示你的问题的小例子。我没有时间从头开始重新创建您的问题。 –

我添加了代码片段。我不确定放置整个扩展是否实用，但如果有必要，我可以添加一个错误行为的屏幕截图。请注意，这种奇怪的行为发生在多个网站上; stackoverflow就是一个例子。 –

阻止页面CSS影响Chrome扩展CSS

回答

相关问题