css - Firefox 制定 CSS 规则？

Question

这是我在检查器上看到的:

两个规则中有一个左高亮，这是 Firefox 正在编写的规则，如果我查看计算样式，我会看到:

最后这是原始 CSS 的样子:

所以 Firefox 正在以某种方式改变位置和宽度规则。

任何人都可以向我解释为什么会发生这种情况以及如何避免 Firefox 更改这些规则？(在 Chrome 中，Safari 工作正常)

Answer 1

“左侧突出显示”用于指示自页面加载以来已在开发人员工具栏中修改的样式规则。重新加载页面和/或重新启动浏览器应该会修复样式表中的规则。

如果在这个“快速修复”之后您仍然遇到问题，我的下一个建议是在您的样式表中搜索 position: absolute，一次禁用一个，然后重新-测试。 Firefox 不太可能自行更改您的样式规则。

您可能还会发现在调试时推迟缩小 CSS 会更容易。这样您将获得更多有用的行号以供引用，而不是将每条规则都引用为 master.css:1。

最后，您可能会发现使用 shallow selectors 更有利在您的 CSS 中，而不是像您所展示的那种深度嵌套的选择器。这将有助于避免 specificity conflicts ，这可能是您遇到的问题的最初原因。