1. ホーム
  2. css

[解決済み] Chrome で注入されたスタイルシートによる奇妙なスタイリングが発生する

2022-02-03 10:37:43

質問

この度、Primeface Theme&Layout Sentinelを購入しました。しかし、Chromeでテーブルのスタイルが変なことに気づきました。テーブルのヘッダーとフッターにオレンジ色のボーダーがあります。同僚にはこれが見えず、私がクロームのプロファイルを変更すると、それも見えません。

オリジナルはこちらでご覧いただけます。 http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38

Chromeがスタイルシートを注入していることに気がつきました。

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

この注入されたスタイルシートはどこから来ているのでしょうか?どうすれば止められますか?クローム拡張機能がスタイルシートを注入できることは知っていますが、このスタイルシートにはprimefacesへのurlがあります。

更新しました。

.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 を使用しています。

解決方法は?

原因がわかりました。ページが正しく表示されるまで、拡張機能を1つずつ無効にしていきました。それは、「CSS Selector Tester」でした。このツールはとても便利でよく使っているのですが、使っていないページがおかしくなってはいけません。

興味深いことに、CSS Selector Testerは、私がスタイルの問題を見たページでは機能しません。他のページでは問題なく動作しています。