スポンサー
ほんとに、イケナイことなんだけど
ねこもりやは、ブラウザは標準で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
スポンサー
ニュースレターを購読する