今日は早起きしてなぜかお好み焼きを作って朝食。全く関係ないけどね。
早速本題ですが、Win-IE のバグの一つに「 float したボックスの左右 margin が 2 倍になる」というのがあると思うんですが、その対処法を思いつきました。
私の場合は、一般的かどうかは知りませんが、今までは以下のどれかで対応していました。
- float したボックスの内側にある全ての要素に左or右 margin を指定。
- float したボックスに左or右 padding を指定して内側に div を用意。
- float したボックスの内側に div を用意し、その div に左or右 margin を指定。
- ハックを利用して Win-IE に半分の margin ?
一番下のは多分やってないと思いますが、主に 1 番上の方法で、2, 3 番目の div は用意するというか、実際には内側にあればそれを利用という感じです。
それで、今回思いついたのがこれ
position: relative; を指定して left or right で指定。
何で今更こんな事に気づいたのかと言うと、サイトリニューアルに伴って、CSS のコーディングルール（自分用）を整理しておこうと思っていたんですが、記述順に関する以下の３つのルールを考えた際に実験してみたのが始まり。
- プロパティの記述順序はアルファベット順。
- border, margin, padding 等で top, bottom, left, right の指定は 1 を逸脱し、ショートハンドの順に従う（top, right, bottom, left）
- top, right, bottom, left プロパティは 2 と同様の順とし、関連性の高い position プロパティの直後に記述するものとする。
3 の「関連性の高い」って部分を確認する為に、top, right, bottom, left プロパティの説明を見ると、「position プロパティが static 以外の場合」的な事が書いてあったので、static というのは通常フローということなので、「float プロパティが none 以外の場合も当てはまるのでは？」と考えて、実際にやってみることにしました。
実験用として float: left; なボックスに left: 10px; を指定すれば、margin-left: 10px; を指定した場合と同様の表示になるかどうかで検証しました。
結果は「同様の表示は得られない。」でしたが、この発想はあのバグ回避に使えるじゃないかと思ってやってみたら、成功したと言う訳です。
今度からコレ使って行こうかと。
コメントする