padding-box, border-boxでbottom, rightの算出が正しくない

症状

ボーダー領域やパディング領域の幅が0より大きいボックスのbox-sizingプロパティ(現在は独自拡張扱いのため-moz-box-sizingプロパティ)の値をpadding-boxやborder-boxに設定した場合、bottomプロパティやrightプロパティの振る舞いが正しくない。ボックスの下辺や右辺の位置が、本来あるべき位置よりも内側に置かれてしまう。

例示

<style type="text/css">
.pr {
  position: relative;
  width: 75px;
  height: 75px;
  background: yellow;
}
.ch {
  position: absolute;
  left: 0;  right: 0;
  top: 0;   bottom: 0;
  margin: 0;
  padding: 5px;
  border: 5px solid blue;
  background: aqua;
}
</style>

<div class="pr">
<div class="ch" style="-moz-box-sizing:content-box;">C</div>
</div>
<hr>
<div class="pr">
<div class="ch" style="-moz-box-sizing:padding-box;">P</div>
</div>
<hr>
<div class="pr">
<div class="ch" style="-moz-box-sizing:border-box;">B</div>
</div>
C

P

B

box-sizingプロパティ(初期値はcontent-box)にそれぞれの値を指定した場合の比較です。すべての場合で親要素の背景(黄色の領域)は見えないはずです。

スクリーンショット

Ns7.1Netscape7.1標準モード

Moz1.7aMozilla1.7alpha標準モード

補足

mozilla.org bugzillaでは以下の項目が該当します。

修正状況

  • Netscape7.1、Mozilla1.6で不具合の発生を確認しました。
  • Mozilla1.7alphaでこの不具合は発生しません。

関連記事

スポンサーリンク

$secure_dirクラス変数 セキュアであるとみなすファイルを格納するディレクトリ

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る