问题
I am using the google chrome developer tools for testing my website;
It is working fine for some elements, however for others it is showing the selector but showing it as having no styles; The element does have styles, and the styles are applied to the element. but the inspector shows no styles.
If I click the link to the css file line for that inspector I can see the styles there.
I saw a google group topic that stated that removing any empty url() declarations fixed the bug. however I have no empty url() declarations.
I also found this bug which is somewhat similar; but not exactly the same. one thing I did notice is that both the usecase this bug provided and my setup are using twitter-bootstrap. I am using the .less version of bootstrap which includes bootstrap into the single css file as a copy > paste method, so my css file has 3740 lines. could this be part of the issue?
The elements are not deep nested (body > div#container > inspected element).
There are not an excessive amount of styles applied to the elements (<= 10).
Click to enlarge
回答1:
Ok, so I also found this bug aswell which looks like it has a closer match to the bug.
It states that
DevTools break when an unrecognised pseudo-class is present in CSS
which twitter-bootstrap does! so it looks like the dev tools are broken if you are using twitter bootstrap (or anything that tries to use vendor-specific pseudo classes). afaik the only way to solve this is to wait for this bug to be solved by the developers.
If someone can post a fix for this I will accept their answer!
来源：https://stackoverflow.com/questions/11520563/google-chrome-developer-tools-not-showing-inspected-elements-styles