Web 元素检查器 (safari / chrome) css 属性变暗
愚蠢的网络元素检查器(safari / chrome)问题,但我似乎无法弄清楚为什么某些属性变暗。
Silly web element inspector (safari / chrome) question, but I can't seem to figure out why some properties are dimmed.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
根据来源 Webkit 检查器对“继承”或“隐式”的 css 样式应用 50% 不透明度,来自 inspector.css
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
border: 1px solid red
color: red
will be grayer.Now the current chrome version seem to color gray some other values, too bad the inspector on the inspector is not working anymore :(
在您提供的链接上查看后,褪色(变暗)的样式规则没有链接到任何浏览器操作,例如:
单击
background:
旁边的小箭头您将获得 Chrome 用于解释 CSS 的规则列表。对于
float
和height
,几乎只有一种方式可以解释,因此 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
andheight
, 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 :)
对我来说这只是一个字符集混合问题。
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.
您是否也收到“解释为图像但使用 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.
只是猜测 - 但您是否检查过这是否不仅仅是一种轻松区分计算样式的方法?
Just a guess - but did you check if it ain't just a way to easily distinguish computed styles?