« テンプレートが壊れた! | メイン | Movable Type3.3へのバージョンアップ »

IE5.x系のボックスハック

いまさらながらに、CSSハック。


もう、IE7もβ3くらいまできてるし、今更…。って感じもしないでもないんですが、一応自分の作ったものに不都合があったので…。


参考にしたのはこちら。
 参考記事 『Win Ie5x対策 幅を指定したら余白は0に
 参考記事 『ボックスモデルハック


この方法、イイ!
ほんとに。


実は、テンプレートを作って、それをお客さんに編集してもらってたので、HTMLをいじることができなくて、そこでCSSだけいじくってどうにかならないだろうかと思ってたところ、この方法を使えば改めてCSSの値を考えていくのがちょっとめんどくさいけど、うまいこといった。

この方法ですが、幅指定(<width>)するidとかclassに対しては、marginとかpaddingを指定しない。とゆうもの。


半信半疑でやってみると、結構すっきりといきまして。
同じ要領で高さ指定(<height>)するものにも使えます。


僕が使ったのは、リスト(<li>)を使ったロールオーバーメニューの部分。
IE5.xで見ると、ずれにずれてたんですよ…。


ただ、MacIEではまだ確認してないんですけどね…。


それに加えて、もうひとつ使うのが『voice-family』を使ったハック。
アンダースコアハック(_widthとかを属性につけるやつ)もなかなか簡単に使えるけれど、WinIEをすべてはじくので、どうかなぁ。ってことで、voice-familyハックの方が僕としては使いやすい。


ただ、これらハックは、IEがバージョン7になって、MacIEも使う人がほとんどいなくなったら、意味を成さないので、まだまだ勉強が必要な感じで。


ほんとは切り分けとかしたらいいんでしょうけどね。
なので、ハックの使いすぎCSSファイルはいかんですよ。

トラックバック

このエントリーのトラックバックURL:
http://www.sriproot.net/mt/mt/mt-tb.cgi/103

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2006年07月18日 12:02に投稿されたエントリーのページです。

ひとつ前の投稿は「テンプレートが壊れた!」です。

次の投稿は「Movable Type3.3へのバージョンアップ」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。