加载时禁用 CSS 样式（开发人员工具）答案

【问题标题】：CSS styles disabled on load (developer tools)加载时禁用 CSS 样式（开发人员工具）
【发布时间】：2017-09-12 13:10:00
【问题描述】：

我有一组未应用的样式。我习惯于覆盖被划掉的样式，但我的样式显示好像我在页面加载时禁用了它们，并且这些样式未应用于任何设备。我也可以在 Firefox 开发工具中启用它们，它们工作正常。

我在这个区域有大量的 JS，所以我愿意接受这就是原因，但我无法在不了解发生了什么的情况下进一步追踪它。我希望所有三种禁用样式都能正常工作（margin-bottom、box-shadow 和 border-radius）。

当然，任何解决整个问题的帮助都将不胜感激，但首先我想了解开发工具给我的行为意味着什么。

如果真的有帮助，我会分享网站地址。

【问题讨论】：

【解决方案1】：

Firebug / Firefox 开发工具显示被注释为禁用的 CSS 行，并允许您将它们视为已禁用它们。

【讨论】：

【解决方案2】：

即使您重写了内联样式（硬编码或使用脚本），相应的样式表属性也会有一条线穿过它。在 FireBug 中，假设是这样，带有线的圆圈表示您手动禁用了它们。

这可能太明显了，但我不得不问，这是一个 SPA 吗？您是否执行过硬刷新？您是否已关闭 FireBug，清除缓存并重试？

【讨论】：

不幸的是，这正是我的想法，但这种行为就像我禁用但我没有禁用一样。我已经尝试过，重新启动一切，并且必须再次确定。我实际上不确定这是否有效，我不久前编写了这段代码。什么是 SPA？
单页应用
您是否尝试过删除并重新安装 Firebug？关闭 Firebug 或在其他浏览器中问题是否仍然存在？
你试过从windows切换到mac吗？（好吧，对不起……那是个玩笑）
不，不是 SPA（感谢那个）。老实说，我并不热衷于将其完全分开，因为它是相当复杂的数据库驱动画廊幻灯片的一部分。我的假设仍然是导致问题的幻灯片的一部分。

【解决方案3】：

如果你提到width: 200px属性被划掉，解释很简单：内联样式属性总是会覆盖CSS属性。

您在右侧element{} 下看到的CSS 属性是由您的style 属性应用的（嵌入在您的HTML 中或由Javascript 设置）。除非您从 style 属性中删除 width，否则您的 CSS width 将永远不会被应用。

【讨论】：