【IE6】サポート終了、お世話になったバグを振り返ってみる
2014年4月9日、Windows XPのサポート終了とあわせて Internet Explorer 6（IE6）もサポートが終了しました。
4/11時点、世界でのIE6シェアは4.2%ほど。 日本国内だけをみると、1.7%です。
中国はいまだ22.2%となかなか移行が進んでないようですね。
今回は、そんなIE6にお疲れ様でしたの意味合いもこめて 一緒に過ごした日々で個人的にハマり度と思い出が深いバグを5つを取り上げます。
- margin: auto で中央寄せが効かない…。
- 背景画像や文字が表示されない…。
- マージンが2倍になる…。
- 画像の下に知らない隙間がある…。
- z-indexが効かない…。
1. margin: auto で中央寄せが効かない…。
DOCTYPE宣言から、記述する！！
IE6では、DOCTYPEの記述以外から開始されると 互換モードとして認識されます。
そのため、DOCTYPE宣言から記述を開始することで標準モードとして動作します。
XHTMLの場合に、XML宣言から書いてハマったことも懐かしい思い出です。
2. 背景画像や文字が表示されない…。
hasLayoutプロパティ を true にしてあげる！！
hasLayoutプロパティとはInternetExplorer独自のプロパティですべての要素が持っているレイアウト情報です。
値としては、真偽の true & false となっています。
デフォルト状態 でが false となっており、true にしてあげるには以下のプロパティのどれかを設定します。
| position | absolute |
|---|---|
| display | inline-block |
| width | 値を何か設定 |
| height | 値を何か設定 |
| float | left または right |
| writing-mode | tb-rt |
| zoom | 値を何か設定 |
私は zoom 派でしたね。
float された要素と 背景画像＆テキストの組み合わせでちょくちょく遭遇しました。
毎回プロパティを記述するのもナンセンスなので
reset.css で すべての要素に
_zoom: 1;を設定していたのも懐かしい思い出です。
ちなみにバージョン8以降ではこのhasLayoutプロパティ自体がなくなりました。
3. マージンが2倍になる…。
float の値 と逆方向に marginを設定する ！！
floatした要素で、marignを左右に設定した場合に、その値が2倍になるバグがあります。
.box {
float: left;
margin-left 10px;
}上記の場合、marginが 2倍の 20pxになってしまいます。
こんなときは、magin を逆方向に指定します。
.box {
float: left;
margin-right: 10px;
}または、padding にしてみたり
.box {
float: left;
padding-right: 10px;
}float 使っての一覧表示が苦手だったあの頃も懐かしい思い出です。
4. 画像の下に知らない隙間がある…。
vertical-aling: bottom を設定する！
これは IEブラウザがもつbaselineのデフォルト設定の問題のようです。
これを解決するには、画像に対して以下のようにCSSを記述します。
img {
vertical-align: middle;
}それでも、どーしても隙間がなおらんというときは、こんなこともしましたね。
font-size: 0;
line-height: 0;無理矢理にブラウザ差異をなくそうとしていたのも、懐かしい思い出です。
5. z-indexが効かない…。
親要素にもz-indexを指定する！HTML内要素の並び順を考慮する！
このバグ、振り返ると一番苦戦したと思います。
モダンブラザでは、z-index に設定した値の順に重なってくれるのですが、z-indexの値をいくら増やしても、全く変わらない…。
IE6では、入れ子になっている要素をpositon指定した場合、親要素の順序が優先されてしまいます。
そのためHTMLの並び順も重なり考慮した並びに変更し、親要素にも z-index を指定してあげます。
position と z-index は常にセットで！と心がけていたのも懐かしい思い出です。
分かりやすい解説記事
最後に
IE6さん、本当にこれまでご苦労さまでした。
あの頃はまだブログもさほどなく、今とは違ってググれば分かるって感じでもなく
トライ＆エラーの繰り返しで、よい関係を気づこうとがんばってきました。
あの頃の経験があるからこそ、今の自分がこうしてWeb制作者を続けていられるだと思います。
今後、お会いする機会はもうないと思いますが（いや、もしかしたらあと数回はあるかも？）
あの時の経験を糧に、これからも精進してまいります。
いろいろとご教授いただきありがとうございました！
