3

このフィドルを見てください：http： //jsfiddle.net/WTcgt/

BOX2の枠だけBOX1が押し下げられるのはなぜですか？これはバグですか？

4

2 に答える 2

3

ボックスサイズ設定プロパティは、Internet Explorer、Opera、およびChromeでサポートされています。

Firefoxは、代替の-moz-box-sizingプロパティをサポートしています。

Safariは、代替の-webkit-box-sizingプロパティをサポートしています。

これが実例ですhttp://jsfiddle.net/WTcgt/2/

これはインラインブロックの動作です：

インラインブロックはインラインに配置されます（つまり、隣接するコンテンツと同じ行に配置されます）が、ブロックとして動作します。

vertical-align:topこの問題を回避するために使用してください。vertical-alignプロパティを使用しない場合、要素は隣接する要素に基づいて同じ行に整列します。詳細については、http ：//www.impressivewebs.com/inline-block/およびhttp://www.brunildo.org/test/inline-block.htmlを参照してください。

于 2012-06-04T09:35:10.117 に答える
1

ボックスはインラインブロックボックスであり、通常のインラインボックスではないため、この点では、それらの境界線は一種の「パディング」として機能します。

明確にするために、BOX2には上部の境界線があるため、BOX2のコンテンツ領域を押し下げます（ ！によって暗示されている場合でも、コンテンツ領域にブリードしませんbox-sizing: border-box）。これにより、仕様（強調鉱山）で説明されているように、同じ行にある他のすべてのインラインブロックボックスのコンテンツ領域がそれに追従します。

インラインの置換されていないボックスの垂直方向のパディング、境界線、および余白は、コンテンツ領域の上部と下部から始まり、 「行の高さ」とは関係ありません。ただし、ラインボックスの高さを計算するときは、 「line-height」のみが使用されます。

于 2012-06-04T09:24:27.670 に答える