スポンサー
ほんとに、イケナイことなんだけど
ねこもりやは、ブラウザは標準でChrome を使ってるので
時々、インターネットエクスプローラー（以下IE）での表示の崩れに気付かないことがある。
もちろん、作成時にはIEでも確認しながら作成するけど。
特に、
仕事じゃくて作ってる場合はうっかりしてしまうのだ。
そんなこんなで、今回も・・・
ROSEのブログの個別ページの関連記事の表示がおかしいことに最近気づくという有り様！
ROSEごめーん！
正常な表示の状態
正常ならこんな風に横並びに上限8記事並ぶはずなんだけどね。
ひとつづつに枠線もついてる状態が正常なんだけど。
表示がおかしい状態
こちらが、表示が崩れてる状態。
IE10で閲覧すると・・・横並びにならずに
縦一列にズラズラと！
CSS（スタイルシート）
関連記事表示にはプラグインYet Another Related Posts Plugin (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
スポンサー
ニュースレターを購読する
