いろいろ試しつつ2,3時間かけてデバッグしてました。
現象としてはFireFoxやChromeでは左上に寄るのにIE8標準モードではインデントされて表示されるというもの。
結果的には「スタイルシートのclass、大文字・小文字の違いに注意」ということ。HTMLソース中のclass名は「treebox」、CSSの指定では「treeBox」となっていた。大文字小文字区別しないで表示してくれるブラウザも多いがIE8は厳密に区別するという話。
どのタグにどんなスタイルを追加すればいいのか(どのスタイルが効いてないのか)判明するのに2時間くらいかかった。
ulに「padding:0」を追加すれば良いと分かる→そのスタイルは「class="treebox"」で既に指定されてるはずなのに何故か効いてない→大文字小文字が違う…
・リストを左上に寄せるにはul要素に「padding:0」と「margin:0」を追加する
・class名の大文字小文字は(ブラウザによっては)厳密に区別される
という知識が有れば1分くらいで修正できた話でしょう。
2時間 vs 1分
よくプログラマの生産性は10倍以上とか言うが、こういう一件一件の事例では120倍にもなりますよと。
0 件のコメント:
コメントを投稿