最近、結構悩んだのでメモ代わりに書いておきます。
先日、作成したサイトがWindows Vista & 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を書くよう、心がけていこうと思います。
![[Valid Atom 1.0]](http://www.tyto-style.com/mt/images/linkbanner/valid-atom.png "Validate my Atom 1.0 feed")
はじめまして、クリアフィックスを使うか使わないか？
使う際はどのバージョンのブラウザでも崩れないようにするにはやはりhackが必要ということですね
>但し、zoomを指定するとCSSのWeb標準チェックでエラーが出てしまうので、嫌がる人も多いようです。
嫌がっていました。
素材の方も見させていただき、どれもセンスのいい素材ばかりです。
ポンポンさん、こちらこそはじめまして。
コメントありがとうございました。
clearfixは現状、細かくデザインするには使わざるを得ないテクニックのひとつだと思っています。
hackにもWeb標準チェックでエラーが出るものと出ないものとがあるので、色々試してみてくださいね。