0

CSSのボーダー、マージン、パディング、幅をいじっていると、余分なピクセルが出てきました...

要素の幅と高さの合計は、幅、境界線、マージン、およびパディングの合計であることを知っています。

このhttp://jsfiddle.net/Fs8HQ/を見ると、すべてが機能しているようです。ボタンをクリックすると、ボーダーから余白にピクセルが移動し、疑似アニメーションが作成されます。

次に、 http://jsfiddle.net/Fs8HQ/1/で幅と高さを固定に設定しましょう(:active から幅と高さを削除します): Firefox と Chrome では、1 つの余分な高さと 1 つの余分な幅のピクセルがすべて移動します。隣接する要素。Opera では、1 つの余分な幅のピクセルと 2 つの余分な高さのピクセルがあります。彼らはどこから来たのですか？

しかし、ここhttp://jsfiddle.net/hJTpY/ピクセルを境界線からパディングに移動するとすべてが修正されるようですが、疑似アニメーションは同じではありません。

最初の 2 つのフィドルでは、コンテンツに近づくにつれて境界が縮小されます。最後のものでは、拡大するコンテンツによって境界線が縮小されます。

なぜそれが起こるのですか？何か足りない？

4

2 に答える 2

2

これは私が最近気づいた問題です：

W3C によって導入されたデフォルトのボックスモデルはcontent-box、適切な doctype が宣言されている場合です (IE で quirks-mode を使用してトリガーできる Microsoft ボックスモデルとは対照的です)。

しかし、最近、ブラウザーには宣言する UA スタイルがあることに気付きましたbox-sizing:border-box(入力要素のみ?)。境界線が幅に含まれているため、トリックが機能しないのはそのためです。これを修正するには、宣言する必要がありますbox-sizing:content-box。同じ問題を扱っているこの質問を参照してください。

于 2012-10-06T12:23:04.383 に答える
0

たとえば、幅を 100px に固定すると、境界線のあるボックスの幅が (box-sizing プロパティにより) 100px になるため、ボックスの縮小によってマージンの増加が補償されないため、問題が発生します。 、幅を設定しない場合に発生します。

幅が固定され、box-sizing が border-box に設定されている場合、他のボックスが移動するのを避けるために、margin プロパティをまったく変更しないでください。

もちろん、簡単な修正は content-box でボックスのサイズを元に戻すことです: http://jsfiddle.net/Fs8HQ/7/

css box-sizing プロパティの詳細については、こちらを参照してください。

于 2012-10-06T11:55:32.250 に答える