Monthly Archives: 8月 2013

今さら聞けないIE6のバグと対策方法【2013】

かつてWeb制作者を悩ませ続けたIE6。
さすがにもうIE6対応を必須と言ってくるクライアントもほとんどいなくなり、
そろそろ「IE6?なにそれおいしいの?」というピチピチの若いクリエイターさんも
沢山出てきた頃ではないかと思います。

正直もうほんとに古いIE6やら7やらへの対応なんてしなくていいと思うのですが、
万が一対応しなきゃならなくなった場合、最近Web業界に入ってきた方には阿鼻叫喚となってしまう恐れがあります。
実際、自分と自分の周囲で2013年の今になってもなおIE6対応を求められたという話を1度ならず経験しています。
リアルタイムでIE6/7対応をしてきた世代ならともかく、これからの若い世代に無駄な時間を過ごしてもらうのは忍びないので、
今更ではありますが、なるべく楽に古いIE6/7に対応する方法をまとめておきたいと思います。

* * * * * * * * * * * * * * * * * * * * * * 

1.標準モードで表示

今時DOCTYPE宣言なしにHTMLを書く人はいないと思いますが、古い既存のHTMLを流用してページ制作をするようなケースでは稀に後方互換モードで表示されてしまうようなDOCTYPEになっているのに気づかないケースもあります。
常にブラウザの表示モードは「標準モード」となるように気をつけましょう。
IEの場合特に「後方互換モード」になっていると、W3C仕様とはかなり異なる表示になってしまうため、大変面倒なことになります。
後方互換モードで表示されるケースとしては、次の3パターンを押さえておけばいいと思います。

 ①DOCTYPEなし
 ②HTML4.01 TransitionalでDOCTYPE後半のシステム識別子がない
 ③XHTML1.0でXML宣言を書く(※IE6のみのバグ)

①や②はよほど古い時代のHTMLを流用しない限り発生することはないと思いますが、
③については注意した方がいいでしょう。
(ちなみに「DOCTYPEって何?」「標準モードって何?」という方はGoogle先生にでも尋ねて下さいね。)

2.困ったらzoom:1;

IE6/7対策をやり尽くしてきた制作者の方なら、他のブラウザは完璧なのにIE6/7だけ表示がおかしいなんていう現象は嫌という程経験してきたことと思います。
IE6/7だけ表示がおかしくなる原因の大半は、奴らだけが持っている「hasLayout」という読み取り専用の特殊なプロパティのせいだったりします。
一から説明するのは面倒なので、気になる人は自分で調べてください。
hasLayoutとは?

結論からいうと、おかしいな?と思ったらとりあえず、怪しい要素に「zoom:1;」と入れてみて下さい。上記hasLayoutが原因の場合であればそれだけで大抵が直ります。
zoom:1;で直らない場合は原因は別の所にありますので、「起きている現象 IE6 バグ」とでも入れてGoogle先生に尋ねてみましょう。

3.floatレイアウト時の原則

IE6には「float方向と同じ方向にmarginをつけるとその値が2倍サイズで表示される」という超有名なバグがあります。
これを回避するには次のいずれかの方法を採用します。

 ①floatと同じ方向にmarginを付けない(反対側につける/paddingで代用する等)
 例)
 .selector{
 		float:left;
 		margin-right:10px; /*反対方向にmarginをつける*/
 }
 
 ②display:inline;を併用する
 例)
 .selector{
 		float:left;
 		margin-left:10px;
 		display:inline; /*バグを出さないためのおまじない*/
 }

4.IE6/7でもdisplay:inline-block;を再現する

サイズ指定可能でかつインライン表示されるdisplay:inline-block;はとても便利ですがIE6/7では効きません。
しかし以下のようにIE6/7向けハック記述を追加すれば同等の効果を得ることができます。

 例)
 .selector{
 		display:inline-block; 
 		 /*IE6,7向け*/
 		*display:inline;
 		*zoom:1;
 }

 

5.IE6/7ではうまくいかない代表的なケースを避ける

floatマージンやdisplay:inline-block;のような簡単に回避&再現可能な方法が確立しているものはいいですが、
そうではないケースについては格闘するだけ時間の無駄なので最初からやらないようにした方が幸せです。
個人的には次のケースは最初から避けるようにしてます。

①IE6/7非対応セレクタの使用

IE6が素直に読めるセレクタは、基本的に「タイプセレクタ」「classセレクタ」「idセレクタ」「グループセレクタ」「子孫セレクタ」のみです。
あとこれにa要素に対する:link, :visited, :hover, :activeの各擬似要素。
子セレクタとか便利な擬似クラスや擬似要素なんかを使いたくなる気持ちをぐっと押さえて、上記の基本セレクタだけで運用しておけば、IE6対応でもセレクタで困ることはまずありません。

②結合クラスセレクタの使用

ひとつの要素に複数のclass名を設定しておき、.class1.class2.class3 といった具合にAND検索風にセレクタを作ることがあるかと思いますが、IE6はこのような結合クラスを使った場合、最後の.class3しか認識しません。また、#id.class1のようにidセレクタとclassセレクタを結合させると、そもそもセレクタとして認識できません。

③インライン要素の末尾に背景画像でアイコン設定

a要素などのインライン要素にbackground-position:right top;で要素の末尾にアイコン画像を背景指定しても、IE6/7では折り返して自動改行した時に背景画像が文字列の末尾についてきません。これは回避方法が無い(と思う)ので、img要素でHTMLに埋め込むしかないです。

6.Pollyfilでカバー

古いIEにはできないことがいっぱいです。HTML5やCSS3はもちろんのこと、
IE6に至っては透過PNGすらまともに扱えません。
こうしたできないことをIEの独自機能(filter)やJavaScriptで機能補完するためのものを「Pollyfilポリフィル」と言います。
どうしてもIE6でも同じように見えるように作らなければならない場合は、最初からIE6にできる機能しか使わないで作るのが一番無難なわけですが、デザイン的にそれが不可能なケースもあります。

そのような時に慌てないために、有名なPollyfilスクリプトやfilter機能は把握しておくと良いと思います。
代表的なものは以下のとおりです。

①IE6に透過PNGを読ませる

DD_belatedPNG.jsdownload

※透過PNGの背景リピート表示に対応
でのロールオーバーには非対応
(※カスタマイズすれば可能→参考:DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする

②IE8以下でもopacityを再現する

.sample {
  sample: .5; /* FireFox, Webkit, Opera */
  -ms-filter: "alpha(opacity=50)";
  filter: alpha(opacity=50); /* IE5.5+ */
}

③IE8以下でもrgba()を再現する

.sample {
  background-color: rgba(255, 255, 255, 0.6);  /* FireFox, Webkit, Opera, IE9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99FFFFFF',EndColorStr='#99FFFFFF')";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99FFFFFF',EndColorStr='#99FFFFFF'); /* IE5.5+ */
}

※IEではrgba()を表現する際、#aaRRGGBB(※aaがアルファ値)と16進数8桁で表現します。
※IEテスターではfilterで指定した透過色は表示されません。表示確認は本物のIE6〜8で確認しましょう。

④IE8以下でもHTML5新要素とCSS3セレクタが使えるようにする

IE9.jsdownload

※HTML5新要素を読ませるにはhtml5shiv.js、CSS3セレクタを読ませるにはselectivzr.jsという有名なスクリプトがありますが、IE9.jsは1つでこれらと同等の機能を実現できます。ついでに「ファイル名-tarns.png」という名称で保存すればIE6に透過PNGを読ませることもできます。

⑤IE8以下でも角丸などのCSS3プロパティを使えるようにする

CSS3 PIE.htcdownload

※border-radius/box-shadow(insetは無効)/border-images/linear-gradient()/複数背景画像に対応
※.htc形式のファイルを使用するにはサーバが対応している必要あり
※癖があるので利用の前には必ずトラブル対処法に目を通し、テストしてから使いましょう。

⑥IE8以下でもメディアクエリを使えるようにする

★css3-mediaqueries.js(download)
★respond.js(download

個人的にはIE8以下でレイアウトが「レスポンシブ」になる意味が全く理解できないので別に要らないんじゃないかと思いますが、
メディアクエリの設定をモバイルファーストにした場合や、レスポンシブなのに意味もなくクロスブラウザを求められてしまったような場合には仕方ないので対応させてやらないといけません。
上記2つがメディアクエリ対応の双璧ですので、どちらか好きな方を使うといいと思います。

* * * * * * * * * * * * * * * * * * * * * * 

IE6/7の落とし穴は細かいものを入れるとまだまだあったりするわけですが、ここにまとめたものだけでもかなりIEトラップを避ける事は可能だと思います。
不運にもIE6対応を迫られてしまった方は参考にしてみてください。(別途対応料金請求するのをお忘れなく!)

そして最後に、、、   IE 爆 発 し ろ !!!!!  ヽ(`Д´#)ノ ムキー!!