IE6,7でJqueryがうまく動かない時の対処

Jqueryをよく使うのですが、IE6,7でIEエラーになる事が『よく』あります。

サイトでよく見かけるのが、最後のコンマを取り忘れていてエラーになるというのがあります。こちら

これでもエラーが止まらない場合は、htmlタグの書き方が問題な時が考えられます。

特にul,liタグを使用するときやaタグを内部で使用している時など、、

<ul>
<li class="parent">aaa</li>
<li>bbb</li>
<li>
<ul>
<li class="child">ccc</li>
</ul>
</li>
</ul>

上記の様なコードは、メニューなんかで階層表示させるときによく見られる方法ですが、モダンブラウザ(Firefox,Safarなど)では問題ないですが、IE6,7だと独自の解釈をしてるようで、うまくJqueryでセレクタ指定が動かないことがあります。

上記のコードであれば、クラスchildまでのタグ階層は”ul > li > ul > li.child”となると思います。

IE6,7では『ulの中にはliが入る』という解釈があるみたいで、ul内直下にli以外のタグを書くと変になるようです。(ul直下にulを書いてもおかしくなります)

ここで時間かかりそうだなと思ったら思い切ってdivタグにしてみてくださいw

<div class="head"><a href="#">クリックしてください</a></div>
<div class="content"><a href="#">クリックするとひらきます</a></div>

上記の様なスライドメニューを実装した場合、.headをクリックすると.contentが開くなんてことができます。詳しくはこちら

モダンブラウザなら問題ないのですが、IE6,7だとクリックするとエラーが出ます。

原因はaタグです。これも先のタグ記述の問題が影響してるようで、aタグを取るとエラーが出なくなります。

カーソルが気になる場合は、CSSでpointer指定をしてあげれば解決出来ます。