僕が色々作ってるホームページも徐々にHTML5化が進んで来ています。
でも、レガシーブラウザーでは対応してません。
IE以外を使用しているユーザーは、どんどん新しいバージョンのアップグレードをしているのに
IE6はIEの中でもドッカーンと出たブラウザー。なかなかアップグレードをしてくれず、いつまでたってもIE6への対応をして来た。久しぶりにアクセスリポートを見て驚きました。

全体のブラウザーの割合

IE=42.85% Android=24.88% Safari=18.86% Chrome=7.24% Safariのモバイル=2.62% FierFox=2.56% ほか

そのうち、IEのバージョンでは、(IE全体での割合。カッコ内は全体での割合)

10=43.97%（18.84%）　9=12.45%(13.82%)　8=32.24%（5.34%）　7=6.97%(2.99%)　6=4.34%（1.86%）

あるサイトでは、AndroidがIEを抜いてるサイトもあるし、IEの6での閲覧が無いサイトも有る。この、IE内で5%に満たない、全体で2%に満たないブラウザの為にハックを行うのをやめた。

透過PNG使えないんでスクリプト突っ込んだり、マージンが倍になるんでスターハック入れたり・・・。

当面スクリプトを入れてるサイトは抜く意味がないんで入れておくけど、CSSのハックはやめる。

そのかわりにIE6で閲覧したユーザーのためにCSSでこんな画像が出るように設定した。

下のdivをanalogCSSに適用する。

HTML

<div id="analog"><img src="mainimage/ie6.png" width="200" height="68" alt="IE6など古いブラウザには一部対応していません。" /></div>

CSS

#analog {
display: none !important; /* 通常ブラウザーでは非表示 */
display: block; /* IE6のみ以下の設定で表示される */
position: absolute; /* 親ボックスの左上からの絶対位置 */
text-align: center; /* #analog内の画像をセンターにあわせる */
z-index: 99; /* レイヤー表示 */
width: 200px; /* 画像のワイド指定 */
height: 68px; /* 画像の高さを指定 */
margin-top: 30px; /* 親ボックスの上面からの画像上面の位置。 */
left: 300px; /* 親ボックスの左から画像の左の位置 */

display:non !important＝このタグを非表示にしなさいってこと。通常のブラウザではこれが最優先されます。

でも、IE6のバグで!importantは効かないので、その下のdisplay:blockが効くので、IE6のみ上の画像が表示されます。

このサイトには適用すらしてませんが、他で運営しているサイトでは表示するように設定しています。

悪名高いIE6ですが、あまり無下にIE6はダメっ！って言ってしまうとユーザーには失礼かもしれないんで、サラっとバージョンアップを促した方が良いかなって思います。

IEの6と7は既にサポートが終了しています。

XPユーザーでも8まではバージョンアップ出来るのでセキュリティー的にもそちらにアップして下さい。

もっとも、XPも来年2014年4月9日でサポート終了しますが。

Tweet