The Trap of Web Design

すいません。clips スキンセットでちょと気になってたところを修正しました。default.css だけ修正。検索サイトのキャッシュ表示が崩れる問題の対処です。

今でこそ各所に知られてる clearfix っていうんですか、アレとほぼ同様の処理が基本のシートにはいってるんですけど、IE バグ対策の height: 1%; っていうのがあるでしょ。ソレ。xml 宣言より上にソースいれられちゃうと、ありゃ、ってことになってたという。

自分、clearfix という手法で広まってるのを知らず、ヒトリで普通に :after でフロート解除することやってて、その上に IE でナントカするにはって考えて、こんなふうになってます。.container の中の次の階層がフロートブロックになってるってやつで。

.container {
width: 740px;
margin: 0 auto;
text-align: left;
}
* html .container {
display: inline-table;
/* \*/
display: inline-block;
/* */
}
.container:after {
content: '';
display: block;
clear: both;
height: 0;
}

inline-block の対応状況とか、そーゆーの実験してて気づいたのですが、これですんじゃってるように思うのだけど、実はどうも心配でたまらないので、height: 1%; いれてたのだけど、とっちゃった。

ていうか、.container に width 指定してたら、height: 1%; はそもそも必要ないじゃん！

あと clearfix 知ってなんで？って思ったのが content: '.'; にして、visibility: hidden; とわざわざ内容いれて隠すってやってるんですが、これカラだとイカンのでしょうかね？動作的になんら問題ないので、自分はここんとこずっとカラにしてるんですが。

コレだとやばくね？というご意見ございましたら是非ともお願いします。

なんかこんなのも発見した

上の CSS の .container に overflow: hidden; いれたら、 :after の箇所全部とっぱらってもちゃんとフロートクリアした状態になる模様で、ただいま各種ブラウザのチェック中。

.container {
width: 740px;
margin: 0 auto;
text-align: left;
overflow: hidden;
}
/* \*/
* html .container {
display: inline-block;
}
/* */

IE7, 6, Safari 2, Opera9, Firefox2 で大丈夫みたいなんだけど。コレって既出？なんて呼ばれてるの？そういや先日のアップルストア札幌で clearfix の解説を大藤さんがやってた時に「overflow を使う方法がある」っていってた方がいたような気がする。これのことか。

MacIE 用の inline-table もいらねー！