Jetpackのタイルギャラリーを強引にIE8に対応させました

こんばんは!今日も花粉が凄いですね><
これから本格的な花粉シーズンを迎えますが、既に花粉はお腹いっぱいです・・・。

JetpackのタイルギャラリーをIE8に対応させる

先日ブログに投稿したJetpackのタイルギャラリーはIE8だと画像が表示されないですが、CSSなどを弄ってはみたのですが自分の力量では上手く表示させることができませんでした。

JetpackのタイルギャラリーはIE8だと画像が表示されない
こんにちは! こちら相模原市南区では朝の雨から雪に変わり、本気で降り始めてきました(汗) あまり積もらないでくれると嬉しいのですが・・・...

IE8の画像幅についてちょっと調べてみたのですが、やはり他のブラウザと比べると挙動がおかしいようです。こちらのサイトを参考にさせて頂きました。
なぜ、IE8では、画像が表示されないことがあるのか – ミショニポー

なぜ、IE8では、画像が表示されないことがあるのか - ミショニポー
なぜ、IE8では画像が表示されないことがあるのか調べてみた 互換表示ボタンがあるから、それを押してくだ..

なるほど!div幅をきちんと設定していないとdiv幅が無くなってしまうのですね。jetpack/modules/tiled-gallery/tiled-gallery.phpの138行目(Jetpack for WordPress 2.2)を確認してみると

$output .= ‘<div class=”tiled-gallery-item tiled-gallery-item-‘ . esc_attr( $size ) . >
<a href=”‘ . esc_url( $link ) . ‘”><img ‘ . $this->generate_carousel_image_args( $image ) . ‘ src=”‘ . esc_url( $img_src ) . ‘” width=”‘ . esc_attr( $image->width ) . ‘” height=”‘ . esc_attr( $image->height ) . ‘” align=”left” title=”‘ . esc_attr( $image_title ) . ‘” /></a>’;
やっぱりimgの親divに幅指定がされていませんね。IE8以外ではこれでも正常に表示されるんですけどね・・・。
ということで、プラグインのphpを直接編集するのはあまり好きではないのですが(プラグインの更新時に編集箇所も上書きされてしまいます)、仕方なく編集することにします。

$output .= ‘<div class=”tiled-gallery-item tiled-gallery-item-‘ . esc_attr( $size ) . ‘” style=”width:100%;”>
<a href=”‘ . esc_url( $link ) . ‘”><img ‘ . $this->generate_carousel_image_args( $image ) . ‘ src=”‘ . esc_url( $img_src ) . ‘” width=”‘ . esc_attr( $image->width ) . ‘” height=”‘ . esc_attr( $image->height ) . ‘” align=”left” title=”‘ . esc_attr( $image_title ) . ‘” /></a>’;

強引に「style=”width:100%;”」を付け足してみました。「width=”100%”」も試してみましたがなぜか上手くいきませんでした。

こうすることでIE8でもタイルギャラリーを正常に表示させることができましたが、ページ読み込み時の挙動がおかしいんですよね・・・><
レスポンシブデザインに対応していないIE8を無理矢理対応させているのがいけないのでしょうか?

それにしてもIE8ではいつも苦しめられますね(n‘Д‘)

【2013/3/4追記】
プラグインのPHPファイルを編集せずにCSSのみでタイルギャラリーをIE8で表示させることができました。
以前に試行錯誤した際にはキャッシュ系のプラグインが悪さしていたようです。
こちらをご覧下さい→【正式版】JetpackのタイルギャラリーをIE8で表示させる

https://kojima-life.co.jp/official-version-jetpack-tile-gallery-to-display-in-ie8