IE7互換モードにするタグはそろそろ・・・

ほんとに、イケナイことなんだけど

ねこもりやは、ブラウザは標準でChrome を使ってるので

時々、インターネットエクスプローラー(以下IE)での表示の崩れに気付かないことがある。

もちろん、作成時にはIEでも確認しながら作成するけど。

特に、

仕事じゃくて作ってる場合はうっかりしてしまうのだ。

そんなこんなで、今回も・・・

ROSEのブログの個別ページの関連記事の表示がおかしいことに最近気づくという有り様!

ROSEごめーん!

正常な表示の状態

正常ならこんな風に横並びに上限8記事並ぶはずなんだけどね。

正常な関連記事

ひとつづつに枠線もついてる状態が正常なんだけど。

表示がおかしい状態

こちらが、表示が崩れてる状態。

IE10で閲覧すると・・・横並びにならずに

縦一列にズラズラと!

表示がおかしい関連記事

CSS(スタイルシート)

関連記事表示にはプラグインYet Another Related Posts Plugin (YARPP) を使って、テンプレートは管理画面の設定で、下図の様にサムネイルに設定しています。

関連記事 (YARPP)設定

”サムネイル”にしている場合のスタイルは
yet-another-related-posts-plugin/styles-thumbnails.phpで設定されているので確認すると以下の様になっています。

「ん?ちゃんと”inline-block”になってるし・・・

あれ?アスタリスクハックがある」

.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title {
	display: inline-block;
	*display: inline;
}

これは、IE7の場合に適用するハックですね。

以下参照

body {
    color: red; /* all browsers, of course */
    color: green\9; /* IE8 and below */
    *color: yellow; /* IE7 and below */
    _color: orange; /* IE6 */
}
body:not(:target) {
    color: black\9; /* IE9 */
}

IE6:プロパティの先頭にアンダースコア「_」を付与
IE7:プロパティの先頭にアスタリスク「*」を付与
IE8:値の末尾に「\9」を付与
IE9:セレクタの末尾に「:not(:target)」を付与+値の末尾に「\9」を付与
IE以外:セレクタの先頭に適用したいプロパティを記載

原因

IEの開発者 ツールで確認してみたら見事にハックしてる。

おまけに、IE8のバグ用にヘッダーにこのタグが!

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

これは、IE7互換モードで表示するためのタグなんだけど、このタグ・・・最新バージョンのIEも同様にIE7のように解釈してしまうので 困りモノ。

そう、IE8が最新だったころのタグのままで放置していました、、、

結局、大元の原因はコレ!!すべてのIEをバージョン7と解釈し、IE7用のCSSハックと合わさって表示がおかしくなっていた模様。

対処

なので、↑のタグを書き換えます。

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

このようにすると、IE8の時だけ、IE7として表示するんだって!

素晴らしい!!

 

参考サイト

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

IE6/IE7/IE8/IE9のCSSハック: 小粋空間

コメントを残す

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

CAPTCHA