IE9はpre要素内の改行が無視されることがある

投稿

Facebook方面で知ったのですが、IE9はpre要素内の改行が無視されることがあるようで、ちょっと試してみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>pre要素の表示テスト</title>
</head>
<body>
<pre>1行目

 3行目
 
  5行目
</pre>
</body>
</html>

pre要素内の2行目は改行コードのみの完全な空行ですが、4行目は半角スペース（ ）があります。

これをIE9で表示すると、なぜか4行目が無かったかのように描画されてしまいます。

サムネイル画像
Windows 7 + Internet Explorer 9 での表示オリジナル画像
サムネイル画像
Windows XP + Internet Explorer 8 での表示オリジナル画像

この例では半角スペース1つですが、複数個の場合やemスペース（ ）でも同じ結果です。一方、タブやノーブレークスペース（ ）の場合は空白が再現され、IE8や他ブラウザと同じ表示になります。

  • なお、pre要素でなくともCSSで white-space が pre または pre-wrap と指定された要素なら同様の事象が発生します。

おもしろいのは、文書型宣言やMedia Typesによっても動作が変わることで、 HTML 4.01 や XHTML 1.0 の Transitional を text/html で配信した場合はこのおかしな動作が起こりますが、同 Strict の場合や XHTML 1.1, HTML5、あるいは application/xhtml+xml で配信した場合は XHTML 1.0 Transitional であっても正しく描画されます。

さすがIE、奥が深いですね!