通过Chrome中注入的样式表进行奇怪的样式设计 [英] Strange styling through injected stylesheets in Chrome

问题描述

我们刚刚购买了Primeface主题和布局前哨.但是，我注意到Chrome中表格的样式很奇怪.表的页眉和页脚具有橙色边框.我的同事看不到，并且如果我更改了chrome配置文件，我也看不到.

We've just purchased a Primeface Theme&Layout Sentinel. However I've noticed a strange styling on tables in Chrome. The Table header and footer has an orange border. My colleagues don't see this and if I change my chrome profile I don't see it either.

原始文件可以在这里找到: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38

The original can be seen here: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38

我注意到Chrome正在注入样式表:

I've noticed that Chrome is injecting a stylesheet:

.ui-widget-header {
    border: 1px solid rgb(231, 143, 8);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
    color: rgb(255, 255, 255);
    font-weight: bold;
}

这个注入的样式表是从哪里来的?我该如何阻止它?我知道chrome扩展程序可以注入样式表，但是此样式表具有指向primefaces的网址，或者仅仅是一个红色鲱鱼而该扩展程序只是修改了现有的有效样式表?

Where is this injected stylesheet coming from? How can I stop it? I know that chrome extensions can inject stylesheets but this stylesheet has a url to primefaces, or is that just a red herring and the extension just modified an existing valid stylesheet?

更新:

.ui-widget-header {
    /* border: 1px solid #3f7506; */
    /* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
    color: #ffffff;
    font-weight: bold;
}

这是正常的样式表(它被其他一些样式覆盖，这就是为什么某些部分被注释掉的原因).这两个配置文件中都存在此样式表.从URL可以看到，样式通常使用相对URI，但注入的样式则使用绝对URI.

This is the normal style sheet (it is being overwritten by some other styles, that's why some part is commented out). This style sheet is present in both profiles. As one can see from the URL, the styles normally use relative URIs but the injected one is using an absolute URI.

推荐答案

好，我找到了罪魁祸首！我已逐一禁用了每个扩展，直到页面正确显示为止.那是"CSS选择器测试器".我认为这是我经常使用的很棒的工具，但是当我不使用它时，它不应与我的页面相提并论！

Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!

有趣的是，在我看到样式问题的页面上，CSS Selector Tester不起作用.在其他页面上，效果很好.

Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.

这篇关于通过Chrome中注入的样式表进行奇怪的样式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！