IE7＆Vista＆Clearfixで生じるレイアウト崩れ

最近、結構悩んだのでメモ代わりに書いておきます。

先日、作成したサイトがWindows Vista &amp IE7で見ると崩れるので直せないかとと相談され、CSSの修正に取り組みました。

しかし、ざっとCSSに目を通しても、特におかしいところは見当たらない。色々と悩んだ挙句、問題はそのサイトをコーディングした人のclearfixに問題があるのではないかと思い、手を加えたところ意外にあっさりと崩れなくなりました。

Win XPでは崩れが確認できなかっただけに余計大変でしたが、うまく直ってくれてほっとしています。

ウェブサイトを制作しているとclearfixに頼らざるを得ないことが結構たくさんあったりします。先日の最初に指定しておくCSSでも紹介しましたが、最も標準的なclearfixは以下のように書きます。

.clearfix:after {
content: ".";
display: block;
height: 0;
line-height:0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* MacIE begin \*/
*+html div.clearfix{height: 1%;}
* html div.clearfix{height: 1%;}
.clearfix {display: block;}
/* Mac IE end */

ですが、大量にclearfixが必要となる時、これをいちいち指定していくのは結構面倒だったりするので、人によっては簡易的なclearfixを利用することも多いようです。

簡易的なclearfixというと、よく使われるのは以下のものですよね。

.clearfix {
overflow: hidden;
}

また、IE6で崩れるケースがあるので、通常はこれに以下のものも一緒に指定しておきます。

* html .clearfix {
zoom: 1;
}

但し、zoomを指定するとCSSのWeb標準チェックでエラーが出てしまうので、嫌がる人も多いようです。

今回、私が修正したCSSで使われていたclearfixは、これとはまた違ったタイプでした。

.clearfix:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}

最初のものとほぼ同じものですが、2つ目以降の指定が省略されていますね。

これだけでも、いわゆるモダンブラウザでは機能しますし、対象ブラウザがモダンブラウザに限定されるケースではこれを使っても大丈夫と私も認識していたのですが、まさかIE7とVistaの組み合わせで崩れるとは思っていませんでした。

面倒でも最初のclearfixを書くよう、心がけていこうと思います。