[blogger]IE互換表示タグについての泣き言1つ。

Mixed Media Painting (Detail) by Choichun Leung / Dumbo Arts Center: Art Under the Bridge Festival 2009 / 20090926.10D.54932.P1.L1.C23 / SML / See-ming Lee 李思明 SML

おはようございます！ウィンブルドンを見てるとテニスしたくなる！って思ったバドミントン経験者なすなふ(@sunafu35)です。
マレーが、もう少し粘るかと思ったんですが、サスペンデッドが入った後は、フェデラーが主導権を握っていましたね。それでも、74年振りのイギリス選手の決勝進出ということもあって、表彰式のインタビューがマレー劇場になってましたが。


さて、それはともかくとして、今回は、少し泣き言を書いてみようかと思います。
泣き言というか、どうしたらいいのか分からない状態。打開策があるなら、是非教えてもらいたいという状況についてのお話です。

IE7互換表示

bloggerでは、標準で用意されているテンプレートがいくつかありますが、確認した限りでは、全てのテンプレートHTMLに

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

という、IE表示時にはIE7の機能で互換表示するようにするメタコードが入っています。

Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも | クリボウの Blogger Tips

▲改めてクリボウさんの記事を読んで、書いてみる気になりました。

▲このブログをIE7互換表示で表示させたところ。
マージンの設定が上手く行ってないのか、余白ができている部分。h要素に設定した画像が表示ない部分などが主に見られます。

IE7の表示のままだとやはり崩れてしまう部分があるので、少し変更しようということにはなるのですが・・・。

IE9での表示

BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】 | 某氏のたわごと NEXT

▲クリボウさんの記事でもリンクが貼ってありますし、表示が・・・と思った時に確認をしていた記事なんですが、この中で、IE9未満ではIE7に互換表示して、IE9ではIE9のまま表示させるように、冒頭で示したメタタグを

<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>

のように変更する手段が紹介されています。

このコードに書き換えれば、枠線の丸み付けや、ボックスシャドウによる影を設定していれば、IE9で参照された場合、ちゃんと適用されるというようになるのですが・・・。

私の場合、そう簡単にはいきませんでした(ﾉ_･｡)

画像で見たほうが早いですね。
このブログをIE9で表示するとこうなります。

▲カラム部分の背景表示が灰色になって・・・。あ、ヘッダー部分のガジェットの丸みは表現出来るようになってますねｗ

▲フィードの呼び出しが出来ないのか、フィード利用のガジェットは全滅。

▲記事最後につけているDISQUSコメントシステムも表示不可。

あと、何故か広告も全部表示されません。

対処？

どう手をつけたらいいかもわからないのですが、どうもIE9で表示した場合に、カラム部分の背景色に設定されている「transparent」が、おかしい表示になっているようです。
調べていると、なんとなくIE9でのtrandparentについての問題が書かれているサイトがあったりはしたのですが、どう解決したらいいのかは、うまくつかめず・・・。

結局

<meta content='IE=EmulateIE7; IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

このように、IE8で互換表示するように設定をして、誤魔化している状況です。
IE8だと、大体のところはうまく表示出来てるんですよね。

あとがき

このブログ、実はこんな問題があったりするのですが。
bloggerの「画像テンプレート」を利用しているサイトを幾つか確認してみましたが、やっぱりIE9での表示だと、少なくともカラムの背景が灰色表示になる問題は出ていましたので、「とりあえずIE9表示にしてしまおう」という方は、注意したほうがいいかもしれません。

そして、こうすればいけるよ！という情報を持っている方がいらっしゃいましたら、是非ともご教授をお願い致します。

それではまた！