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

Question

I have a set of styles that are not being applied. I am used to overridden styles being crossed out but my styles are showing as if I had disabled them on page load and the styles are not applied on any device. I also can enable them in the firefox dev tools and they work fine.

I have a load of JS going on around this area so I'm willing to accept that is why, but I'm not able to trace it any further without understanding what is happening. I'm looking to get all three disabled styles working ( margin-bottom , box-shadow & border-radius ).

Of course any help figuring out the whole problem would be appreciated, but primarily I'd like to understand what the behaviour that the dev tools is giving me means.

If it really helps I'll share the site address.

Answer 1

If you refer to the width: 200px attribute being crossed out, the explanation is quite simple: Inline style attributes will always override CSS attributes.

The CSS properties you see under element{} at the right are those applied by your style attribute (embedded in your HTML or set by Javascript). Unless you remove the width from the style attribute, your CSS width will never be applied.

Answer 2

Even if you were overriding the styles inline (hard coded or with script), the corresponding style sheet property would have a line through it. In FireBug, assuming that's what that is, the circle with the line means you manually disabled them.

This may be too obvious, but I have to ask, is this an SPA? Have you performed a hard refresh? have you turned off FireBug, cleared cache and tried again?

Answer 3

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