こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。
コーディングを始めてはや1年。今でこそ、そこそこできるようになってきた僕ですが、初めの頃はそれはもう悲惨なものでした。
あるときはIEのバグで先輩に助けを求め、またあるときはIEのバグで先輩に助けを求め、そしてまたあるときはIEのバグで先輩に助けを求め・・・。
そんな時代に、CSSハックを使わず、極力自力でバグをつぶすために、僕は先輩の助言を元に「バグで詰まったらまず目を通す11のヒント」なるものをノートにリスト化して書きとめておいたのでした。
バグったらとりあえずこの項目に目を通す。するとGoogle先生に頼らずともなんとかなるようになりました。
今でこそもう使わずともよくなりましたが、コーディングに不慣れな方は、このようなリストを作っておくといいかもしれません。
参考程度に以下、ご覧になってみてください。
IEなんて怖くない！冷静にバグを叩き潰すための11のヒント
1.floatは解除したか？変なところにfloatさせていないか？あるいは、floatをかけ忘れていないか？
レイアウトが崩れたり、段落ちしたり、変な隙間が空いていたらまず疑う項目。
「float」や「clearfix」が適切に指定されていないせいで崩れていることはしばしばあります。
グローバルナビが階段状に崩れる、というのは昔よく目にしましたが、こいつのせいでした。
2.怪しそうな部分をコメントアウトしてはどうか？
どこに問題があるのかわからなければ、怪しそうな部分を片っ端からコメントアウトする方法はオススメです。
消してみて、レイアウトが正常になったら、今消した部分に問題があるということ。
3.キャッシュが残っていないか？
ホントは直っているけど、キャッシュのせいで反映されていない、ということはよくあります。
しつこくキャッシュを消してみてください。特にIEは消すのがちょっとめんどいです。
ディレクターさんやクライアントさんなど、他の人もブラウザチェックに絡む際にはご注意あれ。
4.切り出した画像に問題は無いか？
画像周りがおかしい場合はすぐに疑ってもいいでしょう。
「綺麗にスライスしたつもりが1pxずれていた」という可能性があります。
特に、コーディングとデザインで分業していたり、他のスタッフと共同で作業している場合はご注意ください。
5.width,height,line-heightは適切に指定されているか？
widthを指定していなかったり、%で指定していると、IEで認識されないとが多々あります。
この辺が怪しければしつこいくらい指定してもいいと思います。
また、line-heightの値が小さすぎるせいで上手く要素が表示されない、ということもよくあります。
6.パスは正しいか？
意外と盲点な部分。
特に、[if IE]を使ってJSなどを外部から読み込ませていたり、CMSなどを利用してHTMLを移し替えたりしていると、いつの間にかパスが間違っていることが。
7.marginは適切に設定されているか？
僕の印象だと、marginの設定が不適切なせいでバグることはけっこうあるんじゃないかと思います。
特にネガティブマージンを使ってる場合は要注意！Firefoxでもたまにレイアウトが崩れたりします。
paddingでも問題ない場面なら、そっちを使うのもありだと思います。
8.そのセレクタは有効か？
モダンブラウザとIEで解釈が異なる、または有効でないセレクタやタグを使ってはいませんか？
特に、「z-index」、「inline-block」、「:last-childなどの疑似クラス」辺りは要注意です。
9.半角・全角スペースが隠れていないか？
これは僕だけでしょうか・・・。稀に半角スペースが紛れているのに気付かず、そいつのせいで段落ちする、なんてことがありました。
10.テーブルタグ周りはIEを意識しているか？
テーブルタグはIE対策する際には、案外面倒です。
「table-layout」を指定しないとwidthが固定されない、テーブルの他の「td」部分で使用した「text-align」が別の「td」にも影響する、「tr」にcss書いても適応されない、「white-space」を指定しないと崩れることがある・・・などなど。
11.タイプミスをしていないか？
HTMLもCSSも完璧、キャッシュも消した、なのになぜ直らない！？……というとき、案外タイプミスをしていたりします。
タグやプロパティ名を間違えたり、IDの「#」とクラスの「.」をごっちゃにしていたり。。。
また、CSSの「;」忘れにも要注意です。chromeなどは空気を読んで認識してくれますが、IEで見ると崩れていたりします。
さいごに
以上、コーディングする際に参考にしてみてください。
また、万が一おかしな点があったり、もっといい方法などあれば、教えていただけると嬉しいです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
