ブラウザでレイアウトが異なる legend

HTML には legend というタグがあります。この legend は fieldset の先頭に書いてグルーピングした form の内容にラベルを付けるように使います。Windows でいうところの GroupBox のラベル部分に相当すると言うとピンと来る人も居るでしょう。

さてこの legend ですが次のような HTML を Chrome (33.0.1750.70 beta-m) と Firefox (28.0 beta channel) に読み込ませてみました。

<!DOCTYPE html>
<style>
.outer {
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  float: left;
  position: relative;
  border: 1px solid black;
  width: 128px;
  height: 128px;
  margin-left: 16px;
  background: #fee;
}

.inner {
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: absolute;
  border: 1px solid black;
  top: 32px;
  bottom: 32px;
  left: 32px;
  right: 32px;
  background: #eef;
}

.burst {
  font-size: 16px;
  height: 16px;
}
</style>

<fieldset class="outer">
  <div class="inner">
  </div>
</fieldset>

<fieldset class="outer">
  <legend class="burst">This is burst</legend>
  <div class="inner">
  </div>
</fieldset>

Chrome (33.0.1750.70 beta-m)
Firefox (28.0 beta channel)

このように Firefox のほうはちょっと下にズレてしまっているのですね。見た感じでは inner の position: aboslute の起点が legend の下側になってしまっているようです。しかも bottom: 32px の指定も無視されちゃっています。

諸々考え合わせると Firefox のバグではないかと推測されますが、いかんせん fieldset と legend の詳細な仕様を調べたわけではないので、いまひとつ自信はありません。

というのも legend 有りの fieldset では background の効果範囲、すなわち position: absolute における基準となる content box の高さが半文字分は低く調整されているように見受けられます。だとすれば実は Chrome のほうも正しいレンダリング結果ではないのではないかという気さえしてくるのです。

ってな具合で色々と気持ち悪いので、私はしばらく legend 使わないことにしました。