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


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:43 | Leave a comment

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

ねこもりやは、ブラウザは標準で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”になってるし・・・

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

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

以下参照

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

原因

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

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

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

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

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

対処

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

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

素晴らしい!!

 

参考サイト

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

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

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:43 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA