2016-05-16 11 views
2

私が持っているものは、スタイリングが壊れている要素です:幅と高さはかなり間違っています。問題は、widthまたはheightがこの要素に指定されていないことです。Chrome Dev Toolsで見ると、他のブラウザに基づいて計算されているため、下に示すように、これらのプロパティはグレー表示されています情報。要素の幅と高さの計算にどのような要素が影響しますか?

enter image description here

そして、コミット間の差分を比較し、私はスタイリング・ルールがこの要素で変化しなかった見ることができます。つまり、の周りにはの要素が変更されました。その要素は多くの子の1つ、または親です。

私が知りたいのは、どのような要素やルールがその計算に影響を与えているのか、それをデバッグする方法を知ることができるのです。

私は、チェックリストの並べ替えがあり、「すべての子要素にwidthプロパティを確認してください。それが設定されている場合、...、そうでない影響を与える可能性のJavaScriptを見るために上に移動...」

のようなものを期待しています

編集:「」どのような要因のブラウザでは、要素の大きさを決定するために、どのような順序で、どのような優先順位で、チェックしますか?」と質問を言い換えることができ

+1

を、コードを見ることなく、多くのものは幅と高さに影響します。コンテンツはおそらく最大です。浮動小数点数などの場合、親や隣接要素の幅も同じです。 – n8wrl

+1

この質問にはコードを表示する必要はありません。基本的には、「要素の次元を決定するために、ブラウザはどのような順序でどのような優先順位でチェックするのですか?それはコードにとらわれないものです。 – Aerovistae

答えて

2

をこれらの仕様を参照してください:https://www.w3.org/TR/CSS2/visudet.html#propdef-height

があります。いくつかの異なるタイプの高さ計算セクション10.6で説明した。そこのサブセクションを見て、要素の高さの計算方法を決定してください。

(ありその他の仕様によって更新されて、そのページ上のセクションのいくつかの警告がだが、アップデートのクイックチェックは、高さのためにすべての変更が含まれていないようです。)

関連する問題