Safariだけfigcaptionの挙動が違うと思ったら修正されていた

IMGP4112

ある日の未明、下記のような安直な発言をしました。

このような頭の悪そうな発言をしたのは、手元のiPhoneのSafariではfigcaption要素がインライン要素的に(改行されず)表示されたからです。後にWindows版Safariでも試してみましたが結果は同様でした。釈然とできない気持ちでいると、日本blosxom界の神からお告げを頂きました。

kyoさんの仰るとおり、やはりfigcaption要素はブロック要素的に(改行されたように)表示されるのがデフォルトのようです。ではなぜ自分の環境ではそう表示されなかったのか。結果としてはSafariのバージョン違いによるものでした。

Safariのfigcaption要素への対応

2011年7月20日にリリースされたSafari5.1では、HTML5への対応強化が謳われていますが、私がfigcaption要素を確認したSafariのバージョンはWindows版、モバイル版共に5.0.2でした。Macの5.1.1で確認するとブロック要素的に表示されたので、5.1を境にfigcaptionの挙動が定められたと考えられます。(参考: figcaption – MDN)

各ブラウザのfigcaption要素の挙動

Safari5.1登場以前の各ブラウザでの表示です。IEはともかく、Safari5.0の表示だけ異なっています。
figcaptionのレンダリング

上記のテストで使用したコードとテストページです。

<caption>
	<a href="http://www.flickr.com/photos/41273156@N07/6143793519/">
		<img src="http://farm7.staticflickr.com/6200/6143793519_0fe5357e4b_m.jpg" alt="IMGP4112" />
	</a>
	<figcaption>figcaption: 猫が歩いている。</figcaption>
</caption>

in Note