シェアオフィス6F
貸会議室6F

こんにちは。コワーキングスペース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)で見ると、画像がビョ~ンと縦に伸びるという問題です。

IE8で見た場合、画像がビョ~ンと縦に伸びてしまう。

IE8で見た場合、画像がビョ~ンと縦に伸びてしまう。

この原因は、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を書いたことによって、ちゃんと表示が対応されました。

CSSで調整してIE8問題を解決したキャプチャ。

CSSで調整してIE8問題を解決したキャプチャ。

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

スポンサーリンク

スポンサーリンク

この記事を書いた人

コワーキングスペース7Fの運営代表者です。7Fの運営会社である株式会社コミュニティコムの代表取締役でもあります。2012年12月1日に7Fがオープンしてから2014年4月末まで店長も兼ねていましたので、外出予定が無い日は基本毎日いましたが、現在は山下に店長を任せ、オーナー兼利用者となりました。今はもともとの本業のITの仕事と、コワーキングスペースに絡んだ創業支援や地域おこしの仕事が中心です。下のフロアを増床することになり、シェアオフィス6Fと貸会議室6Fの運営もしています。趣味は自分の思い付いたWebサービスを自分で自由に開発することです。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索