web元素检查器（safari / chrome）暗淡的css属性

Question

愚蠢的网页元素检查员（safari / chrome）问题，但我似乎无法弄清楚为什么有些属性会变暗。

Answer 1

根据源Webkit检查器对来自inspector.css

的“继承”或“隐含”的css样式应用50％不透明度

.styles-section .properties .implicit, .styles-section .properties .inherited {
    opacity: 0.5;
}

• 隐含的是border: 1px solid red color: red等复合属性下的隐式属性。
• 继承是具有显式“inherit”值的那些。

现在当前的chrome版本似乎将其他一些值显示为灰色，检查器上的检查器不再工作了：（

Answer 2

在您提供的链接上查看后，褪色（暗淡）的样式规则没有链接到它们的任何浏览器操作，例如：

点击background:旁边的小箭头，您会看到Chrome用于解释您的CSS的规则列表。

在float和height上，几乎只有一种方法可以解释，因此Chrome不需要添加任何特定于浏览器的样式，以使其按预期显示。

希望有助于解释它:)

褪色规则是不需要浏览器特别注意的规则：）

Answer 3

对我而言，这只是一个字符集混合问题。

HTML文件本身和其中一个CSS文件被编码为带有BOM的UTF-8，而其他CSS文件被编码为ANSI。我仍然无法弄清楚Chrome是如何设法显示几乎所有内容的。我将所有文件切换回没有BOM的UTF-8，问题解决了。感谢W3C验证器在BOM存在时暗示我。

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

Answer 4

你是否也被“解释为图像但是使用mime type text / css”？ 我是。

这解决了它： Chrome interprets CSS Stylesheet as image

基本上，如果你的css文件中有'background：url（）'或'background：url（“”）'，只需将它们注释掉或删除它们（或者你知道，只需在其中放置一个路径） 然后，页面应该加载Chrome检查器中的css样式作为活动状态。

Answer 5

只是一个猜测 - 但你是否检查它是否只是一种轻松区分计算样式的方法？