CSS実験室
clearfixの決定版を作る －Mac IE編－
前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがない」と書いた。その流れでいえば、マイクロソフトもサポートを打ち切ったMac版IEにそもそも対応する必要があるのか、IE編でWin版IE5.0を無視したのだから、Mac版IEも無視していいのではないか、という疑問が当然わく。至極もっともなことである。が、しかし、それで終わってしまっては本稿自体が成り立たない。しぶしぶではあるが、Mac版IE（5.x）でfloatをクリアする方法を探ってみよう。結論はもうすでに出ている。以下の通りである。
.clearfix:after {
content: url(pixel.gif);
display: block;
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* Mac版IEを除外 \*/
.clearfix { display: block; }
/* */
前回、触れたように、「display: inline-block」にはMac版IEでもfloatクリア効果がある。しかし、Win版IEと違って、「display: block」に戻すとfloatクリア効果も消えてしまうので、その部分にバックスラッシュハックを用い、適用対象からMac版IEを除外する。結局、最後にハックに手を出してしまい、スッキリしない気持ちは残るが、これで、晴れてMac版IEでもfloatをクリアできるようになったわけだ。
ただし、気を付けなければならないのは、このclearfixを適用させた要素は、Mac版IEではインライン的に扱われてしまうこと。例えば、margin: autoでのセンター合わせなどはできなくなる。したがって、div要素などに一律に指定するのでなく、上記ソースのようにクラスとして用意し、floatクリアが必要な要素にだけ適用させるようにしたほうがいい。でないと、Mac版IEで予期せぬ事態を引き起こす。
もし、インライン的に扱われることを嫌うなら、ソースとしてはますます汚くなるが、下記のように「overflow: hidden」をMac版IEにだけ適用させる方法もある。
.clearfix:after {
content: url(pixel.gif);
display: block;
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; }
/* Mac版IEのみに適用 \*//*/
.clearfix { overflow: hidden; }
/* */
(last modified: 09/12/2008)
このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/47
- HTML5対応版clearfix（予告）
- clearfixの決定版を作る －Mac IE編－
- clearfixの決定版を作る －IE編－
- inline-blockの奇妙な世界
- clearfixの決定版を作る －モダンブラウザ編－
- floatと一緒にwidthも指定しないと回り込まない
- ひとつの要素にfloatとmarginを同時に設定すると位置がずれる
- floatを繰り返すとレイアウトがくずれる
- 要素を左右に隙間なく配置することができない
- 「font-family: 細明朝体」でスタイル指定が無視される
- font-sizeを%で指定すると、ある値でサイズの逆転が起きる
- マージンをまとめて設定するとテーブルはセンタリングされない
- コメントで「表」の字を使うと直後のスタイル指定が無効になる
このサイトは、Creative Commons License のもとにライセンスされています。
Powered by
Movable Type 3.37