19

X ピクセルの高さのテーブル セルがある場合、それが兄弟の高さなのか、X ピクセルの高さの<td>子divをどこかに持っているのかを正確に確認できますか?

基本的にこれ、150 ピクセルではなく 172 ピクセルである理由を確認したいと思います。高さは、コードで明示的に設定されることはありません。

この種のことを示し、各子/兄弟ノードをクリックしてCSSを検査する手間を省くブラウザ拡張機能はどこかにありますか?

編集: ほとんどのブラウザーに DOM インスペクターが組み込まれていることは既に知っています。ただし、最初の段落で述べたように、すべての CSS 属性が要素に直接継承または設定されるわけではありません。属性が計算される方法を示すより良いツールがあるかどうか知りたいです。

4

2 に答える 2

9

親要素の高さを変更する原因となっている要素を絞り込む簡単な方法はありません。状況に応じて、親要素に直接スタイルを適用することも、1 つの子にすることも、多数の子を組み合わせることもできます。ほとんどのブラウザーには、問題のあるスタイルを追跡するタスクを容易にするツールが組み込まれているか、アドオンを介して利用できますが、「簡単」ではありません。

  • ファイアフォックス
  • Firebug、 Hitを使用F12し、[インスペクター] タブにいることを確認し、[インスペクター] タブの左側にあるボックス付きの矢印をクリックして、要素を選択します。スタイルは右側に表示され、直接適用されたスタイルや親要素から継承されたスタイルなどのカテゴリに分類されます。
  • インターネットエクスプローラ
  • を押しF12て、カーソル アイコンをクリックし、要素を選択します。直接適用されたスタイルと継承されたスタイルのツリービューをレンダリングします。
  • グーグルクローム
  • ヒットF12すると、スタイルの表示は Firebug の表示に似たものになります。

Firebug では、選択ツールを有効にすると、カーソルの下の要素の輪郭が表示され、要素の大きさがページ上に表示されます (border: 2px solid blueスタイルを適用したかのように)。 HTML インスペクターを使用すると、どの要素を扱っているかを正確に知ることができます. これは、魔法のように「ああ、この特定の要素とスタイルが問題を引き起こしているものです」と言うつもりはありませんが、問題。

于 2013-10-08T17:29:05.923 に答える