今なおブラウザシェア10.1%もあるIE6とどう向き合えばいいのか

登場から10年以上経つにもかかわらず、亡霊のようにいき続けているIE6(Internet Explorer 6)ですが、日本でのシェアは10.1%もあるようです。

見過ごせない数字ですので、そんなIE6について考えてみます。

Internet Explorerの歴史

Internet Explorerは1995年8月24日に公開され、現在はIE9まで公開されています。
  • IE1 - 1995年 8月24日
  • IE2 - 1995年11月27日
  • IE3 - 1996年 8月16日
  • IE4 - 1997年 9月30日
  • IE5 - 1999年 3月18日
  • IE6 - 2001年 9月19日
  • IE7 - 2006年11月 2日
  • IE8 - 2009年 3月20日
  • IE9 - 2011年 3月15日

今回のテーマであるIE6は2001年に公開され、5年以上も最新バージョンとして提供されていたことになります。

そのため、IE6は圧倒的なシェアを占めることになりました。

IE6が優れたブラウザなら問題ないのですが、「IE6を永眠させるべき10の理由 - ITmedia」なんかで言われているように問題点が多いので、企業サイトなんかではIE6への対応による負担も大きくなっているようです。

IE6のシェアは

microsoftが2011年3月に開設したThe Internet Explorer 6 Countdownによると、2011年3月現在IE6のシェアは世界全体で11.6%で、日本では10.1%となっています。

ie6.png

特にアジアでのシェアが高いようで、中国が33.8%、韓国が24.5%になっており、日本の10.1%は高い方から6番目となります。

macrosoftは1%未満を目安にしているようで、現在のところフィンランドとノルウェーが1%を切っています。

ie6-2.png

このように、IE6のシェアは減少しているもののこのペースだとまだ数年かかりそうです。

IE6はCSSの解釈がおかしい

IE6の困ったところは色々あると思いますが、サイトを作る側としては、CSSの解釈がおかしいためレイアウトが崩れてしまったりし、悩みの種になっていると思います。

有名なものを2つとその解決法を紹介します。

ボックス幅の解釈

div#box{
	width:100px;
	border:1px solid black;
	padding:5px;
}

このようにCSSを指定した場合、最新ブラウザではボックス全体の幅は112pxとなりますが、IE6では全体で100pxとなります。

【対策】 widthとpadding、borderを一緒に使わない
div#box1{
	width:100px;
}
div#box2{
	border:1px solid black;
	padding:5px;
}

このように分けて指定し、box1の中にbox2が入るようにすると解決です。

floatで回り込むとmarginが2倍に

div#box{
	float:right;
	margin-right:20px;
}

このように指定した場合、通常は20pxですが、IE6の場合40pxとなります。

【対策】 marginとfloatを使うときはdisplay:inline;を忘れずに
div#box{
	float:right;
	margin-right:20px;
	display:inline;
}

IE6の場合margin-leftが40pxになりますが、display:inline;を追加すると通常通り20pxとなります。

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。

IE6のCSS対策の最終手段としてCSSハック

どうしてもというときはCSSを使いましょう。

.sample{
	width: 100px;
	_width : 120px;
}
この場合、IE6以下のみ120pxとなり、他のブラウザでは100pxとなります。
.sample{
	width: 100px;
}
* html .sample{
	width : 120px;
}

こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100pxとなります。

IE6は透過PNGに非対応

CSSの他に困りそうなのが、透過PNGに非対応なところです。

ie6-3.png

例えば通常はこのように表示される透過PNGですが

ie6-3-2.png

IE6だと透過させたいところが水色になってしまいます。背景画像にロゴ画像を重ねる場合なんかはつらいですね。

対応策は以下のサイトでまとめられているのでご参考に。

透過PNGについては対応法はあるものの、対応していないサイトも多いようです。

ie6goal.png

サッカー好きには欠かせないこのサイトも

ie6smashing.png

海外の有名サイトも

ie6microsoft.png

microsoftですら

IE6での表示状況を確認するには

ウェブサイトを作成していて、IE6に困っている方なら、恐らくIE6よりも新しいバージョンのIEをパソコンにインストールしていると思います。

そんなパソコンでのIE6での表示を確認するにはこちらのフリーソフトがおすすめです。

IETester

IETester

IE6だけでなく様々なバージョンのIEの表示を確認できます。

IE6への対応状況

IE6で色んなサイトを見ていると、やはり大手のサイトはちゃんと表示されますが、個人ブログではカラム落ちしていたりすることもしばしばです。

Google ウェブマスター向け公式ブログもカラム落ちしています。

ie6google3.png

GoogleはIE6へのサポートを終了しているので特に気にしていないのでしょうか。

GoogleやYahoo!のように表示はちゃんとされても一部機能が使えないとサイトは多そうですね。

ブラウザのシェアはサイトによって偏りがある

もちろんIE6ユーザーの割合はサイトによって違います。

例えば、私が運営している投資関連のサイトでは、IE6は11.14%でブラウザのベージョン別では全体の3番目になっています。

ie6-chartpark.png

で、規模は全然違いますが、このブログは1.74%になっています。

ie6-webpark.png

IE6対策はどこまですればいいのか

先ほど紹介したように、IE6ユーザーの割合はサイトによって全然違います。

このブログはサイト作成に関するブログなので、パソコンに関する知識も多いユーザーさんが多く、FirefoxやChromeが多くを占めています。IE6は1.74%ですので私はほぼ無視しています。

IE6にどこまで対応するかは、IE6ユーザーの割合で判断すればいいのかなと思います。

私もこのブログはIE6をほぼ無視していますが、他のサイトについては他のブラウザで見たものとあまり違いがないようにしています。

結論として、CSSは1行追加するだけでも対応できる場合も多いので最低限のレイアウトは守りつつ、透過PNGのように別ファイルが必要なものはサーバーへの負担や読み込み速度を考え、ある程度捨ててしまえばと思います。

jQueryを使ったスクリプトなんかもエラーが出るケースも多いですが、気にしていたらきりがないので、企業サイトでもない限りもう仕方ないかなと。

今回色々書いてみて、IE6はほんと迷惑なブラウザだなと改めて感じました。

身近にIE6を使っている人がいたらバージョンアップを進めて勧めてみましょう!

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
企業サイトをメンテしていますが、IE6で来る人が10%前後いるのでIE6でのレイアウト崩れとか、サイト機能を保全するために未だにIE6の載ったパソコンを引退させられず、困っています。
知り合いの企業でははっきりうたっている所もあります。


×バージョンアップを進めてみましょう

○バージョンアップを勧めてみましょう
【2011/04/29 12:15】 | 通りすがり #7TybVfNU | [edit]
はじめまして。

ご指摘ありがとうございます。
お恥ずかしい限りです。

10%はさすがに見過ごせないですよね。
企業サイトでしたら信用にもかかわりますので
対応せざるを得ないですし。

うちの会社はパソコンを入れ替えた去年までIE6でしたし、
なかなかパソコンの入れ替えをできない会社も多いと思うので
まだまだ苦悩は続きそうです。
【2011/04/30 07:58】 | 管理人 #E2ywrYdA | [edit]
意外に多いだね
【2011/10/17 19:27】 | taobao.jp #5vAq0eDQ | [edit]
最新の数字で7.1%です。
結構多いですよね。
早くなくなればいいのに~
【2011/10/17 21:32】 | 管理人 #E2ywrYdA | [edit]
IE6が残る理由は、
ほとんどのサイトで問題なく使用できる。
7-9が不甲斐ない。
この2点ですね。

大半のユーザーは脆弱性は気にしません。
WEPが残っているのと同じです。
透過PNGの件なども「細かいこと」として扱います。
ホームボタンが右へいったことのほうが「重大」という
ユーザーもいます。

IE6は高性能なアンデッドなのです。
【2011/11/17 03:24】 | Chrome使い #- | [edit]
自分はもうFirefoxとChromeしか意識していません
それでもevent系の差異には苦しめられます

JavaScriptにおいてIE6を考えると簡単にできることもできなくなります
もうトラウマです…
【2013/01/18 14:07】 | 名無し #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加