IE6対応まとめ！

新年もあっという間に2週間経ってしまいましたね！今回は、個人的に名残惜しいInternet Explorer 6（以下IE6）対応についてまとめました。「IE6対応に関する14のサンプル」とかも作ってみて、あらためてIE6対応の難儀さを実感しました！もう二度とこんなことで時間を取られたくない…。ほんと、IE6、なくなるみたいで、ほんとよかったです。ひゃっほい！

ついにIE6がこの世から消えるって！

最後の最後までIE6対応は続くの？

昨年の末にこんなニュースが流れてWeb制作者を狂喜乱舞させてましたね。リリースからちょうど10年という節目がそうさせたんでしょうか。

Microsoft、IEのアップグレードを自動配信へ　旧版のセキュリティ問題に対応（2011.12/16） ユーザーが何も操作しなくてもIEの最新版が自動的にダウンロードされ、インストールされるようになる。

思えばIE6はリリース当初から、大っきなセキュリティホール、表示の不具合、その他いろいろな脆弱性など上げられ、長年に渡り嫌われ続けてきました。時代に追いつけなかったんですね…。

Web制作者にとってこれは、それほど待ち望んだ朗報だったんです！やっと…やっと覚悟を決めてくれたか…！うん、おめでとう！
上記の「IE6を一掃する!!――マイクロソフト、IE6のカウントダウン・サイトを開設」では以下のように語られています。

IE6のシェアが過去1年間のペースで下落を続ければ、1％を割り込むのは2012年6月になる見通しとなっている。Microsoftは2014年4月まで、IE6をサポートすると約束している。

あと半年足らずでIE6のシェアは1％を割り込む見通し。ともすれば、年末にはもうIE6は残ってないんじゃないか…！ζ*'ヮ')ζ

昨年はこうした“IE6抹消を宣言”する年だったと言えます。そして今年はそれを実行！ですね！

Internet Explorer 6 Countdown

Microsoft、IE 6の米国でのシェア1％切りを祝う（2012.1/4）
このサイトには米調査会社Net Applicationsの最新データに基づくIE 6のシェア分布図が掲載されており、Microsoftは新たに1％を切る国が増えるごとに“お祝い”をしている。
日本での開始日程はまだ不明だが、自動配信が実施されると、Windows XPでIE 6を使っている場合はIE 8にアップデートされることになる。

今年はMicrosoftはお祭りだな。そしてIE6とともにIE7も消えるんですね。めでたしめでたしです。

「IE6対応はオプションで」ってそれ外国の話でしょ？

ただ、世の中にはIE6じゃないきゃダメだなんていう境遇の人がいます。そのほとんどがIE6を使わざるを得ない人たち…。
下記の記事でも真ん中あたりで語られてました。

嫌われまくりのIE6の現状と仲良く付き合う方法（2011.6/7）
IE6を好んで使っているユーザーより、使わざるを得ない状況にあるユーザーが多いようです。会社で古いWindowsを使っている場合、IE6以上のバージョンを利用できなかったり、会社のルールで他ブラウザーをインストールできなかったりします。社内システムをIE6全盛の頃に作った会社だとそうなってしまいますね。

WebDesigningとかWeb関連の雑誌や記事を読んでいて、「IE6は非対応」とか「IE6対応はオプションで」というのをよく聞きますが、「それって外国の話でしょ？」って、去年（2011年）の初旬くらいまでずっと思ってました。というのも、僕の行く先々にはなぜか、IE6が居るからです。“歴史ある大きな企業さまのお仕事”が多いからなんですね。なので、僕はWebの仕事を始めてこの方、専らIE6はデフォルトで要対応です。そして懸念なこの記事です。

一方、自動アップグレードを望まない企業のためには「Automatic Update Blocker」というツールを用意し、IE 8と9の更新をブロックできるようにする。

アップグレード拒めちゃうんじゃないか。
10年以上に渡り使い続けてきた腐ったシステムを見直す絶好の機会なのに、その重い腰を上げない限りIE6はそこだけ永遠に…？IE6仕様のシステムがどんなもので、刷新するのにどれだけ工数がかかるかなどは全く分かりませんが、全国のIE6使用中のみなさん、時代に乗りましょう！

「IE6対応」を振り返りたい

Announcement | IE6 Funeral

…と、そんなわけで、IE6対応のポイントを、僕の経験を元に、改めてまとめてみました！主にCSS解釈の問題についての考察です。
今さら“CSSハック”とか言ってももうトリビアですが、IE6を弔うつもりで書きました！
冒頭のニュースの件でもあったように、IE6が抹消される日も遠くないということで、数年後読み返しても違和感のないように、すべて過去形でお送りします。

※IE6対応（クロスブラウザ対応）に関する記事はすでに「クロスブラウザのためのHTML/CSSのテクニック集」や「IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎」など、あらゆるすてきブログで、分かりやすくまとめられています。この記事はその反復になるかもしれませんが、個人的にIE6を弔いたい為に書いた、レガシーな位置づけです。

追悼！IE6対応

まえがき

IEには「DOCTYPE スイッチ」というものがありました。
標準準拠モードと呼ばれる、W3Cの仕様に準拠したレンダリングを行うモードと、後方互換モードと呼ばれる、古いブラウザと互換性のあるレンダリングを行うモード。これらはDOCTYPE宣言の種類によって切り替わるのですが、その詳細について触れると長くなるのでここでは触れません。

DOCTYPE スイッチについては下記記事に詳しく解説されてます！

DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )（2008.9/29）

とはいえ基準を設けないと話の軸がブレるので、こちらで用意したサンプルは下記のタイプで作る事にしました。

XHTML 1.0（IE6のみ後方互換モード）

  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

※IE6では、DOCTYPEより前に何か文字列が入っていると、問答無用で後方互換モードになるという仕様だったため、XML宣言を入れる事で否応無しに後方互換モードになってしまいました。これを避けるためにはこちらで紹介されているように、XML宣言自体を書かない方法がありました。が、ここでは避けずに後方互換を楽しみますXD。

もくじ

僕がこれまでに何度かブチ当たった、よくあると思われる事例から、「IE6対応に関する14のサンプル」を用意しました。

  1. floatしたブロック要素へmarginを指定すると、floatした方向へのmarginが2倍になった。

  2. width/heightの値はpadding/border分も含んだ値になった。

  3. table内で同じ事をやると複雑な結果になった。

  4. marginにマイナス値を指定するとボックスからはみ出した部分が見えなくなった。

  5. width/heightに小さい値を指定すると、指定どおりにならなかった。

  6. font-sizeをpx指定すると、ブラウザでのフォントサイズ変更ができなかった。

  7. ボーダーを透明にできなかった。

  8. overflow: visibleを指定すると、“親要素からはみ出す”のではなく“親要素が小要素分広がった”。

  9. imgのwidthとheightの値を空にすると、画像が表示されなかった。

  10. imgの下に余分な隙間ができる。

  11. モダンブラウザと、IE6/IE7ではz-indexの優先順位が違った。

  12. position: relative;は元居た痕跡を残し、position: absolute;は元居た痕跡を残さない。

  13. IEはCSS3に対応していませんでした。

  14. floatの解除について

もう葬儀も終わっているんだし、IE6の事はきれいさっぱり忘れよう。
さぁ、HTML5＋CSS3だ〜(๑´∀`๑)ﾉ。

今回、参考にさせていただいた記事です！

Comment & Pingback

コメントを残す