IE9でHTML5要素が表示されない

CakePHPをあれこれいじっている。

素のHTMLファイルでHTML5の文書を書いて、CSSを使ってデザインを作った。
ちゃんと表示されることを確認している。

これを、CakePHPで表示しようと思ってやってみると、うまくいかない。
CakePHPのHTMLヘルパーという機能があって、ヘッダーの情報などを書きだす関数が出来上がっている。ところがまずこれはHTML5にはデフォルトでは対応していない。Webを検索してみると、そういう風にヘルパーを作り直すとか、追加で何かをダウンロードするとか、皆さんいろいろされているようだが、それはレイアウトを変更することでとりあえずしのぐことにする。

それで、ヘッダーも変わり、CSSもちゃんと読み込まれて背景色などが変わったのに、中央寄せとかHTML5で追加された<header>タグの書式などが反映されない。

それで、ソースを全部コピーしてhtmlファイルで保存して表示してみると、やっぱり表示されない。なぜ?前に作った時には表示されることを確認して作ったはずなのに・・・

もしや?と思ってFirefoxで見ると、ちゃんと表示されているのである。

何が前のファイルと違うのか?
<!docutype html>が、CakePHPに宣言させると大文字で<!DOCTYPE HTML>になっている!変えたらスタティックなHTMLではちゃんと表示された!

そこで、CakePHPのレイアウトで、ヘルパーに宣言させるのをやめて、直に<!docutype html>と書いてみる・・・と、それでもまだちゃんと表示されない。

ソースを見直してみると
<!docutype html>
<html lang=”ja”>
のように先頭に空白が入っている。これしか違いはない。これはCakePHPが勝手に挿入しているのだ。どうやってとったらいいのだろう?

それでWebで探してみると、View.phpのrenderLayout関数の最初の一行目にob_clean();というのを加えればいいとわかった。

やっと表示された!

つまり、IEは先頭に空白や余分な文字なく、小文字で<!docutype html>が宣言されていないとHTML5として扱ってくれないわけだ。

ところで役に立ったと思ったら一応ブログ村をクリックしていただけるとうれしいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください