前の記事「CSS ハック」を使ってやってみたいこと。
IEにだけ入れたいものとして例をあげるなら、
<li>に入れたリスト用背景が、始めの数行出なかったり、ドラッグしたら現れたりするバグ
ハック技とか使わず真っ向から取り合おうとすると、そのliに関わるulに対して幅を指定するか、liに文字高くらいのheight:14px;を入れるかするなどがあります。しかし、これらには色々厄介な面があります。
まず、高さですが、heightはFirefoxでは禁じ手（私がそう思う）で、高さ指定してしまうと、Fxは高さに非常に忠実に従うので、下に何が来ても、行が長くなってもその部分の高さを再現しようとして、文字が重なったりくっついたりして、めちゃくちゃになるんです。
（height指定は、boxとかでそれより下がゴソゴソで、ブラウザ・OSによって余る行数が違うから揃えられないからpadding-bottomで固定することもできないなぁっていうとき、効果的なんですよね。Wordで言うところの改ページみたいな存在。）
次に幅ですが、widthを入れてしまうと、500px部分や200px部分にもリストってあちこちに使いたいものなので、幅を入れてしまうことで使い回しができなくなるんですよね。そのためクラスの種類を増やすことになってしまい、困ってるんですよね。現状幅指定で凌いでますけど。
そこでこのIEだけに向けて指定できるCSSハックを使えば、Firefoxでは禁じ手のheightを、IEだけに向けて入れるのがいいかもしれないってわけです。
高さ指定はFxにとってはイケてないですが、IEはそこにある物の分量を優先する傾向があるので、多いときはheightを無視して伸びてくれます。
- IEでは高さがあるので背景が見える。
- Fxでは高さ入れたことにならないので崩れない。
- どこにも幅指定してないので使い回し出来る♪→クラス種類節減！