1

フィドルを使用してテスト ケースをセットアップしました: http://jsfiddle.net/5M7X7/2/

いくつかのborder-boxレイアウトを変更するペット プロジェクトがあります。階層化されたブロック要素で、奇妙な (まだブラウザ間で一貫性のある) 動作が見られます。

例のように、3 つの div があります。最初の div は高さと幅が固定されており、その子は高さと幅が 100% で、両側に % パディングがあり、子は高さと幅が 100% です。

垂直パディングは、幅を使用して計算されています。これは意図的な癖border-boxですか？css を使用して、高さを使用して垂直方向のパディングを計算し、「期待どおりに」動作させるレイアウトのトリックはありますか?

JS の回避策も、最小のボックスのサイズを変更する別の方法も必要ありません。この特定のレイアウトの癖、なぜそれが起こっているのか、そしてそれを「動作させる」ための純粋でシンプルな css の方法があるかどうかに興味があります。

EDIT どうやら、使用しているボックスサイズに関係なく、パディング％は幅のパーセンテージとして計算されます。フロントエンド開発者としてこれまでにこれに遭遇したことは一度もありません。誰かが良い回避策を知っているなら、私はすべての耳です。

ありがとう！

4

1 に答える 1

1

これは実際には CSS 仕様 の一部であるため、この動作は正しく、期待どおりになるはずです。

なぜという説明が必要な場合は、実際には提供されませんが、親の高さが子の高さに依存し、子の高さがパディングのパーセンテージの影響を受けるためであると推測されます。

編集:これを少し拡張すると、幅の計算は子のボックス モデルに依存しません。どちらも指定されていない場合、子の幅は親から大きくなる可能性があります。

span, div {
    display: inline-block;
    border: 1px solid black;
}
span span {
    padding: 50%;
}
<span><span>foon</span></span>
<div><div>foon</div></div>

http://jsfiddle.net/XHDEL/

于 2013-03-28T23:16:47.323 に答える