IE7でデザインが崩れる
サイトのデザインがIE7で崩れている。というわけでCSSをのぞいてみるとびっくり。CSS詳しくないし、他のサイトのCSSもみたことはないけれど、こんなに複雑に書くものなの！？ハックが入っていないセレクタはないぐらいに込み入っている。
とはいえ対応できるかぎり対応を試みる必要あり。
今のところ３つのケースを発見。
- blockの中の要素はblockからはみ出る(CSSの仕様通り？)。そのせいで、次のBlockが意図した場所にくっつかずデザインが崩れる。
これは次の要素にclear:leftを指定することで対応。
- 縦方向のpaddingの解釈が異なる？
- position:relatedの解釈が異なる？ウィンドウのサイズを変えても表示位置が変わらない。
結局のところ、なに１つ整理して理解できていないことが判明。明日もうすこし紐解くことにする。
ブラウザのバグ対応とCSSハック-Andy Budd氏http://journal.mycom.co.jp/articles/2006/07/05/atmedia2006/001.html
表示上の問題は、ときに、文法違反やスタイルの優先順位の干渉(優先度の異なるセレクタでスタイルを指定しているため、スタイル同士が干渉を起こし、意図したスタイルが得られないなどの問題を引き起こすこと)、過度に込み入ったコーディングやブラウザ固有のバグ、そしてCSS仕様に対する理解不足などから生ずると解説。必ずしもブラウザのせいばかりで起こるわけではない点を強調した。それを踏まえ、問題を解決するために氏が紹介した6つの方法論とは、以下のとおりだ。
1. シンプルさを保て
2. 真っ先に自分の非を疑え
3. 予防は治療に勝る
4. 攻撃は最大の防御（または「己の敵を知れ」）
5. 単純化することで問題の原因を抽出せよ
6. ハックの使用は最後の手段
