Web 元素检查器 (safari / chrome) css 属性变暗

发布于 2024-09-24 06:45:50 字数 121 浏览 8 评论 0原文

愚蠢的网络元素检查器(safari / chrome)问题,但我似乎无法弄清楚为什么某些属性变暗。

元素检查器

Silly web element inspector (safari / chrome) question, but I can't seem to figure out why some properties are dimmed.

element inspector

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

酸甜透明夹心 2024-10-01 06:45:50

根据来源 Webkit 检查器对“继承”或“隐式”的 css 样式应用 50% 不透明度,来自 inspector.css

.styles-section .properties .implicit, .styles-section .properties .inherited {
    opacity: 0.5;
}
  • 隐式的是位于诸如 border: 1px Solid red color: red 之类的复合属性下的颜色会更灰。
  • 继承是具有明确“继承”值的。

现在当前的 chrome 版本似乎将其他一些值设置为灰色,太糟糕了检查器上的检查器不再工作:(

According to source Webkit inspector apply 50% opacity to css styles that are "inherited" or "implicit", from inspector.css

.styles-section .properties .implicit, .styles-section .properties .inherited {
    opacity: 0.5;
}
  • Implicit are the one that are under a composite property like border: 1px solid red color: red will be grayer.
  • Inherit are the ones with the explicit "inherit" value.

Now the current chrome version seem to color gray some other values, too bad the inspector on the inspector is not working anymore :(

烂柯人 2024-10-01 06:45:50

在您提供的链接上查看后,褪色(变暗)的样式规则没有链接到任何浏览器操作,例如:

单击 background: 旁边的小箭头您将获得 Chrome 用于解释 CSS 的规则列表。

对于 floatheight,几乎只有一种方式可以解释,因此 Chrome 不需要添加任何浏览器特定的样式来使其按预期显示。

希望这有助于解释它:)

褪色规则是不需要浏览器任何特别关注的规则:)

After looking at it on the link you provided, the faded (dimmed) ones are the style rules that don't have any browser operations linked to them, for example:

Click the little arrow next to background: you get a list of rules that Chrome uses to interpret your CSS.

On float and height, there is pretty much only one way that can be interpreted and so Chrome doesn't need to add any browser specific styles to make it display as intended.

Hope that helps to explain it :)

Faded rules are rules that don't need any special attention from the browser :)

我不是你的备胎 2024-10-01 06:45:50

对我来说这只是一个字符集混合问题。

HTML 文件本身和其中一个 CSS 文件被编码为带有 BOM 的 UTF-8,而其他 CSS 文件被编码为 ANSI。我仍然不明白 Chrome 是如何成功地显示几乎所有内容的。我把所有文件都改回UTF-8无BOM,问题就解决了。感谢 W3C 验证器提示我 BOM 的存在。

希望这至少对其他人有帮助。

For me it was just a charset mixing problem.

The HTML file itself and one of the CSS files were encoded as UTF-8 with BOM, while other CSS file was encoded as ANSI. I still cannot figure out how Chrome managed to show almost everything right. I switched all of the files back to UTF-8 without BOM and the problem was solved. Thanks to the W3C validator that hinted me on the presence of the BOM.

Hope this helps at least someone else.

梦在深巷 2024-10-01 06:45:50

您是否也收到“解释为图像但使用 mime 类型文本/css 进行传输”?
我是。

这解决了它:
Chrome 将 CSS 样式表解释为图像

基本上,如果您的 css 文件具有“背景:” url()' 或 'background: url("")' 其中,只需注释掉它们或删除它们(或者你知道,只需在其中放置一个路径)
然后,该页面应在 chrome 检查器中加载 css 样式,使其恢复为活动状态。

Are you also getting "interpreted as image but transferred with mime type text/css" ?
I was.

This solved it:
Chrome interprets CSS Stylesheet as image

Basically, if your css file has 'background: url()' or 'background: url("")' in it, just comment them out or delete them (or you know, just put a path in there)
The page should then load with the css styles in chrome inspector back as active.

╰沐子 2024-10-01 06:45:50

只是猜测 - 但您是否检查过这是否不仅仅是一种轻松区分计算样式的方法?

Just a guess - but did you check if it ain't just a way to easily distinguish computed styles?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文