Strange styling through injected stylesheets in 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.

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

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;
}

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?

Update:

.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;
}

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.

回答1:

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!

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

回答2:

I had the same issue with injected stylesheet, hiding social buttons from my website.

It turned out my Adblock plus was blocking Facebook and YouTube social buttons.

回答3:

remove your newly installed browser extensions and cache, that may solve your problem.

来源：https://stackoverflow.com/questions/32758890/strange-styling-through-injected-stylesheets-in-chrome

标签

css

google-chrome

primefaces