<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>になったら実現できない…

見出し

実際のソースはこちら

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

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

関連記事

Pocket