<legend>はFirefoxやwebkit系でdisplayを変更できない

スマートフォン用にtable-cellでtable風の左右並びレイアウトを組む事があったのですが
何度やってもFirefoxとChrome、Safari(webkit系)で<legend>タグのdisplayがtable-cellに変わらない!

ずいぶん試した末に、<legend>を<span>や<div>など他のタグに変更したら同じCSSでdisplay:table-cellを指定できました。
まさかそこが原因だったとは。
不覚にも、<legend>が原因というのにたどり着くまで時間がかかりました。

くわしくはサンプルで。

サンプル

table-cellを使ってるあたりから、スマートフォン対応に組んだソースですのでIE8以下非対応です。
そして、IE9以上とOperaでは<legend>タグでも意図したとおりtable-cellに変換できてます(笑)
<legend>の扱いはどっちの解釈が正しいんだろうか…

こうスタイリングしたいところが

見出し

タグが<legend>になったら実現できない…

見出し

実際のソースはこちら

</p>
<fieldset class="sample_fieldset">
<div class="legend">見出し</div>
<ul>
<li>
			<label for="sample_2_1">項目1</label><input id="sample_2_1" type="checkbox">
		</li>
<li>
			<label for="sample_2_2">項目2</label><input id="sample_2_2" type="checkbox">
		</li>
<li>
			<label for="sample_2_3">項目3</label><input id="sample_2_3" type="checkbox">
		</li>
<li>
			<label for="sample_2_4">項目4</label><input id="sample_2_4" type="checkbox">
		</li>
</ul>
</fieldset>
<p>

</p>
<fieldset class="sample_fieldset">
<legend class="legend">見出し</legend>
<ul>
<li>
			<label for="sample_2_1">項目1</label><input id="sample_2_1" type="checkbox">
		</li>
<li>
			<label for="sample_2_2">項目2</label><input id="sample_2_2" type="checkbox">
		</li>
<li>
			<label for="sample_2_3">項目3</label><input id="sample_2_3" type="checkbox">
		</li>
<li>
			<label for="sample_2_4">項目4</label><input id="sample_2_4" type="checkbox">
		</li>
</ul>
</fieldset>
<p>

<br />
.sample_fieldset,<br />
.sample_fieldset * {<br />
	-moz-box-sizing: border-box;<br />
	-webkit-box-sizing: border-box;<br />
	-o-box-sizing: border-box;<br />
	-ms-box-sizing: border-box;<br />
	box-sizing: border-box;<br />
}<br />
.sample_fieldset {<br />
	margin: 1em 0;<br />
	background: #000;<br />
	padding: 0.25em;<br />
	border-radius: 0.25em;<br />
	border: 0 none;<br />
	font-size: 12px;<br />
}<br />
	.sample_fieldset .legend {<br />
		display: table-cell;<br />
		color: #fff;<br />
		background: #666;<br />
		text-align: center;<br />
		padding: 0.5em;<br />
		width: 1%;<br />
		min-width: 1em;<br />
		vertical-align: middle;<br />
	}<br />
	.sample_fieldset .legend+ul {<br />
		display: table-cell;<br />
		width: 99%;<br />
		padding: 0 0 1px 1px;<br />
	}<br />
		.sample_fieldset li {<br />
			position: relative;<br />
			display: block;<br />
			float: left;<br />
			width: 50%;<br />
			height: 3em;<br />
			background: #fff;<br />
			border: solid #000;<br />
			border-width: 1px 1px 0 0;<br />
		}<br />
			.sample_fieldset li label {<br />
				cursor: pointer;<br />
				position: absolute;<br />
				top: 0;<br />
				bottom: 0;<br />
				left: 0;<br />
				reght: 0;<br />
				padding: 1em 1em 1em 3em;<br />
				width: 100%;<br />
			}<br />
			.sample_fieldset li input {<br />
				margin: 1em;<br />
			}<br />

もっと検証しながら掘り下げたら、理由や回避方法が見つかるかな。
fieldsetとlegendでの自由度が減るのはなんだか負けた気がするので、何とかしてみたいです!

関連記事