Firefox制作CSS规则？

Question

这是我在检查员身上看到的：

两个规则中有一个左侧突出显示，这是Firefox组成的规则， 如果我查看计算出的样式，我会看到：

最后这就是原始CSS的样子：

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

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

Answer 1

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

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

您可能还会发现在调试时推迟缩小CSS更容易。通过这种方式，您可以获得更多有用的行号，而不是引用的所有规则都在master.css:1上。

最后，您可能会发现在CSS中使用shallow selectors而不是像您显示的深层嵌套选择器一样有利。这有助于避免specificity conflicts，这可能是您遇到问题的原因。