CSSのwidth:100%とwidth:autoの違い

CSSのwidth:100%とwidth:autoの違い

1.問題

少し前にツリー構造を調整していたときに、ツリーは比較的長いため、IE6 では動作しません。 外側の要素は展開されず、ノード名の半分だけが表示され、アイコンと名前は新しい行に表示されます。 ただし、IE8 では正常に表示されます。そしてIE9。問題を特定した結果、下の図の赤で示されているように、問題は幅の値を auto に設定することで解決できることが最終的に判明しました:

.TreeView,.TreeView ul{ [2] width:auto には、margin-left/margin-right の属性値が含まれます。その値には、margin-left / margin-right の値が含まれます。

padding:0px 0px 19px;

幅:100 %;/*

ここを auto

*/ に変更します

background

:url(./trstree-default-line.gif)repeat-y 0px center ;}

2. 結論

[1] width:100% には、

margin-left

と margin-right の属性値が直接含まれません。 margin-left / margin-right を含む値。マージンが設定されている場合、新しい幅の値はコンテナの幅にマージンの値を加えたものになります。 (よく観察してください) 余白を追加すると、対応する側の余白が増えることがわかります。また、幅が画面の範囲を超えているため、水平スクロール バーがさらに表示されます。 (これは、親コンテナに対する相対的な本体です)。

width:auto は常に行全体を占めます

! ！ ！マージン値はすでに含まれています (つまり、行全体) マージン値を設定する場合は、行全体を使用して、マージン値を減算して現在の幅を取得します。減算した値が該当面のブランクとなります。注目すべき特徴は、水平スクロールバーが表示されない、つまり幅が増加しないことです。 [3] IE6では正常に表示されないが、IE8とIE9では正常に表示される IE8とIE9のwidth:100%の解析がIE6と異なるためかもしれませんが、widthの2つの解析は次のとおりです。自動は一貫しています。

以上がCSSのwidth:100%とwidth:autoの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。