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

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

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

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

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

なぜ、IE8では、画像が表示されないことがあるのか - ミショニポー
なぜ、IE8では画像が表示されないことがあるのか調べてみた互換表示ボタンがあるから、それを押してください。などと解説がある。 閲覧者としては、それでいいことなんだけれども、 プレイヤーとしてどうかというと、htmlのような簡単なものにどえらい手間をかけて、わざわざ標準モードにしているかといえば、質の高いコンテンツを提供...

なるほど!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‘Д‘)