石輪っぷり!

未だに Mac版 IE を気にかけなければならないのかって感じですが、現在構築中のサイトのクライアントが iMac を使用されており、その周辺にも Mac 愛用者が多そうなので、普段チェックしている Firefox，Windows版 IE7，IE6，IE5.5，Safari （Netscape，Opera をチェックすることもある）に加え、今回は Mac版 IE5 での表示確認もすることにしました。

案の定、いろいろとレイアウトにズレがあり、CSS を変更したり、Mac版 IE 専用の CSS ファイルを作ってそれだけに読み込ませるようにしたりして修正をしていきました。

ところが、あるページを表示しようとするとフリーズしてしまうという致命的な問題が。

それはちょっと複雑なメールフォームを設定しているページ。他のブラウザでは全く問題ないのですが、Mac版 IE ではフリーズしてしまいます。
フォームに組み込んでいる Javascript を削ったり、ひとつずつフォーム項目をコメントアウトしながらいろいろ試しているうちに、チェックボックスの部分に問題があることが判明しました。

しかし、目を凝らして見てもソースに問題は見受けられません。一般のブラウザでは問題ないし、構文チェックもOK。
そうこうしているうちに label タグの置き方に原因があることがわかりました。

ちなみに、label タグはフォームの項目と入力エリアなどのコントロールを関連付けするために付けています。これを付けてあると、項目のテキストをクリックしても関連付けられたコントロールにフォーカスされますし、音声ブラウザでは何の項目の入力エリアかがわかりやすくなります。

で、チェックボックスやラジオボタンの場合、label の置き方が2通りあります。

<label for="check1">
<input type="checkbox" id="check1" name="check1" value="1" />
○○○
</label>

あるいは、

<input type="checkbox" id="check1" name="check1" value="1" />
<label for="check1">○○○</label>

一般的にどちらでも問題なく機能するのですが、この記述方法が原因でした。当初前者のように記述していましたが、これを後者の記述に変更したらフリーズしなくなりました。

このために何時間悩んだことか。全く IE ってやつは！