Stinger3テーマで記事内の画像が大きくなる問題

WordPress テーマ「Stinger3」使用時に、IEのブラウザで閲覧すると、記事内の画像が大きくなり、格好わるいのでスタイルシートを修正しました。

下図では、IEで閲覧した際に、記事内のサムネイル画像やはてなブックマーク画像が、こんなにでっかくなっちゃってます。

普段使用しているブラウザで、SafariやGoogle Chrome,Firefoxを使いっていて、IEはほとんど使用しないので、発覚が遅れてしまいました。

Stinger3テーマ内のStyle.cssでmax-widthをnoneもしくは任意の値にしました。

オリジナル

.kizi img,.wp-caption {
  margin-bottom: 20px;
  height: auto;
  max-width: 100%!important;
  width:100%\9;
}

カスタマイズ後

.kizi img,.wp-caption {
  margin-bottom: 20px;
  height: auto;
  max-width: none;
  width:auto;
}

max-widhが100%になっているのが原因だと思いますが、noneだと、もしかすると大きい画像がレイアウトからはみ出す可能性もあるので、max-width: 500px;でも良いのかもしれません。

アクセス統計では、私のサイトの場合、IE閲覧で訪問してくれる方が多いので、重要ですね。