IE8で画像がビョ～ンと縦に伸びる問題をCSSで解決する方法

Web制作・Webサービス
2014.08.16

こんにちは。コワーキングスペース7Fの星野邦敏です。
このコワーキングスペース7FのWebサイトをつい先日にリニューアルしたのですが、レスポンシブWebデザインで、1ソースで、PC端末、iPadなどのタブレット端末、AndroidやiPhoneなどのスマートフォン端末、で、それぞれ横幅サイズに合わせて、見え方を最適化しています。

これに伴い、HTML5とCSS3が適切に効く、Google Chrome、Firefox、Safari、それぞれのWebブラウザの最新バージョンと、IE(Internet Explorer)のバージョン9以上を対象としているのですが、何らかの理由でIE8(Internet Explorer 8)を使っている人もまだいるかも、ということで、そこまでは対応していました。

一方で、Internet Explorerのバージョン7とバージョン6は、WindowsXPのサポートが終わり、セキュリティ的にそれらのWebブラウザでインターネットをすることは相当に危険があると思いますので、本来の使い方をしていれば、IE7とIE6を使っている人はいないはずで、レスポンシブWebデザインでスマートフォン対応もしている関係から切り捨てています。実際IE7とIE6のシェアも1%未満のようで良いかなと思っています。

さて、そのような中、IE8特有のバグが見つかりました。
トップページやアーカイブページに実装したアイキャッチ画像が、IE8(Internet Explorer 8)で見ると、画像がビョ～ンと縦に伸びるという問題です。

この原因は、CSSで、max-width: 100%と指定していれば、縦横比率が保たれるはずが、IE8(Internet Explorer 8)では保たれない、という特有の問題です。
体がシュッと細く見えるというメリットがあるかもですが、やはりちゃんと対応した方が良いということで、以下のCSSを書いて対応しました。

img {
    width: inherit\9;
    max-width: 100%\9;
    height: auto\9;
}

「\9」とあるのは、IE8以下のWebブラウザのみにこのCSSを適用する、という意味です。この記述により、他のWebブラウザでの見え方には影響を与えません。

このCSSを書いたことによって、ちゃんと表示が対応されました。

いわゆるIE6、IE7、IE8などの過去のInternet Explorerのバージョンでの表示は、Web制作者にとって、イレギュラーな表示がなされることが多く、今のようにレスポンシブWebデザインで、1ソースのCSS3のMedia Queriesでスマートフォン対応までする仕様が多いことを考えると、両方に気を使うのは難しいかなと思っています。
今後はWindowsでも、Internet Explorerの最新バージョンしかサポートしない、というような情報も出ていますし、Web制作者側の視点からすると、今後はそうなってくれたら対応もスムーズにできますし良いなと考えています。