Chrome 覆盖 PrimeFaces 样式

问题描述 投票:0回答:13

我们刚刚购买了 PrimeFaces 主题“Sentinel”。然而我注意到 Chrome 中的表格有一个奇怪的样式。表页眉和页脚有橙色边框。我的同事看不到这一点,如果我更改 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;
}

这个注入的样式表来自哪里?我怎样才能阻止它?我知道 chrome 扩展可以注入样式表,但是这个样式表有一个 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。

css google-chrome primefaces
13个回答
32
投票

好的,我找到罪魁祸首了!我已经一一禁用了每个扩展,直到页面正确显示。它是“CSS 选择器测试器”。我认为这是一个我经常使用的很棒的工具,但当我不使用它时它不应该破坏我的页面!

有趣的是,CSS 选择器测试器在我看到样式问题的页面上不起作用。在其他页面上它工作正常。


22
投票

我在注入样式表时遇到了同样的问题,从我的网站隐藏了社交按钮。

原来我的 Adblock plus 屏蔽了 Facebook 和 YouTube 社交按钮。


7
投票

刚刚在打印样式表中使用“保存到口袋”扩展覆盖规则。

另外,假设您的 Google“隐身”(隐私模式)浏览器未运行您的扩展程序,则查看“隐身”页面可以快速检查浏览器扩展是否存在问题。


7
投票

如果有人在 2022 年 2 月 24 日偶然发现这一点,因为大多数网页由于

color-scheme: dark
就在注入样式表的元素处而具有黑色背景,那么罪魁祸首是“Adobe Acrobat:PDF 编辑、转换、签名工具” - https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj

禁用扩展后工作正常。


4
投票

对于正在经历此问题的巴西人(尤其是),请检查您是否有 Méliuz 扩展 (chrome://extensions/?id=jdcfmebflppkljibgpdlboifpcaalolg) 并禁用它。


2
投票

如何在 Chrome 中调试“注入样式表”

  • 打开开发控制台,转到网络选项卡
  • 过滤一些“.css”
  • 查找加载一些 CSS 文件的扩展域
  • 通过过滤域在扩展程序列表中查找扩展程序(如图片“hcndlme...”)
  • 尝试禁用扩展并重新加载页面


1
投票

在我的情况下,我禁用了名为“Nimbus Screenshot & Screen Video Recorder”的 chrome 扩展


0
投票

删除新安装的浏览器扩展和缓存,这可能会解决您的问题。


0
投票

同样的事情也发生在我身上,由于 Chrome 中的一个名为“EPUB READER”的扩展,链接从导航栏中消失了。我禁用它并显示链接。


0
投票

这个问题似乎主要是由录音机扩展引起的。我的问题是由“Screen Recorder”chrome 扩展引起的。


0
投票

对我来说,

Shield
功能导致了这样的样式问题。禁用后,样式就如预期的那样。


0
投票

这让我发疯,感谢您发布此内容。

ExifViewer Pro chrome 扩展程序也可以执行此操作,如果其他人在某些照片上看到随机出现的微小相机图标,您可以单击该图标并提取照片的 EXIF 数据。它会在您的页面中注入一个跨度,如下所示:

<span class="overlayContainer" style="top: 447.375px; left: 124.5px; opacity: 0.5;"></span>

0
投票

我在 Chrome 中开发浏览器扩展时遇到了这个问题。有一个带有以下 CSS 的注入样式表:

body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 75%;
}

奇怪的是,这种情况发生在禁用所有其他扩展的情况下,并且仅出现在

chrome-extension://
页面上。

此样式表没有显示在“网络”选项卡中,除了这个其他问题之外,我找不到任何其他文档或参考:Chrome 扩展与本地开发测试相比显示不正确的字体大小

© www.soinside.com 2019 - 2024. All rights reserved.