2012-07-17 12 views
8

私は自分のウェブサイトをテストするためにGoogle Chromeの開発ツールを使用しています。Google Chromeデベロッパーツールで検査された要素のスタイルが表示されないのですか?

いくつかの要素では問題なく動作していますが、セレクタを表示しているものの、スタイルがないものとして表示されているものもあります。要素にはスタイルがあり、スタイルは要素に適用されます。インスペクタはスタイルを表示しません。

そのインスペクタのCSSファイルへのリンクをクリックすると、そこにスタイルが表示されます。

私は、removing any empty url() declarationsがバグを修正したというGoogleグループのトピックを見ました。しかし私は空のurl()宣言はありません。

また、this bug which is somewhat similarも見つかりました。正確に同じではありません。私が気づいたことの1つは、このバグが提供した使用法と私のセットアップがともにtwitter-bootstrapを使用していることです。ブートストラップの.lessバージョンを使用しています。このブートストラップはコピー&ペースト方法として単一のCSSファイルに入っていますので、私のCSSファイルには3740行のがあります。これは問題の一部になる可能性がありますか?

要素はディープネストされていません(body > div#container > inspected element)。
要素に適用されるスタイルが多すぎません(< = 10)。


Click to enlargeDev Tools Example

+0

'計算されたスタイル'の値が表示されますか? –

+0

はい、 '計算されたスタイル'の下にスタイルが表示されます – Hailwood

+0

おそらく、あなたが読んだことに言及した空のURLと同様に起こる可能性のあるエラーがあるかどうかを検証するために、 http://jigsaw.w3.org/css-validator/ –

答えて

6

[OK]を、ので、私もそれはバグに近い試合を持っているように見えるthis bug aswellを見つけました。
それは認識されていない疑似クラスは、Twitter、ブートストラップがない

CSS

中に存在する場合

デベロッパーツールを破ることを述べて! twitterブートストラップ(またはベンダー固有の擬似クラスを使用しようとするもの)を使用している場合は、devツールが壊れているように見えます。これを解決する唯一の方法は、このバグが開発者によって解決されるのを待つことです。

誰かがこれに対する修正を投稿できる場合は、私はその回答を受け入れます!

+0

こんにちは、私はリンクした最初のバグを起こした人です。私はそれと他のバグの両方が実際に同じ基本的な問題を記述していることを確信しています。これはChromeが標準のbootstrap.cssのいくつかの側面で窒息するために起こります。私のバグは、マイルストーン22(現在の開発者マイルストーン)に含まれているため、優先順位1としてタグ付けされていますので、うまくいけば修正に時間がかかりません。その間、FirefoxとFirebugを使用してCSSをデバッグすることは可能です。 –

+0

私は今、安定したチャンネルに戻りました。これが修正されたときにここでコメントすることができれば非常に感謝しています。 – Hailwood

+2

今日の開発チャンネルのリリースで修正されました。 –

関連する問題