HTML5でiframeの下に隙間ができた。vertical-alignで消す。

すでに運用されているWebサイトに新たなコンテンツを追加する仕事にて。

ヘッダやフッタなどは流用するために、既存サイトからソースをそのままコピー。
どうやらグローバルナビはiframeにて表示させている模様。

そのiframeの下になぜか隙間ができる。既存サイトではできていないのに。
そもそも、実際にはどの要素に対して隙間ができているのかわからなかったので、そのiframeも含め前後の要素のCSSをチェックするも、問題らしき記述は見つからず。相違点がみつからない。

「どこが違う?」といろいろ考えた末にたどり着いたのが、既存サイトでは使われていないhtml5でコーディングしていること。

ということで、DOCTYPE宣言(<!DOCTYPE html>)を試しに消してみた。

隙間が消えた。これか。XHTML1.0とは仕様が違うんだね。

下に隙間ができるときに怪しいのはvertical-alignですよね。そこでCSSで以下を追加。

header iframe {
	vertical-align: bottom;
}

はい、隙間が消えました。よかった。
いや、よくない。だいぶ時間が取られた…。

HTML, HTML5&CSS3 | , |