[IE9　jQuery　動かない]　旧バージョンIEに対応せよ！！！

• By robiii
• 2016年2月17日
• [IE9　jQuery　動かない]　旧バージョンIEに対応せよ！！！ はコメントを受け付けていません

(9日目&10日目まとめ)

こんにちは、robiiiです。
早いものでもうインターンも10日目が終わりました。

すでに折り返し地点に来てしまっているわけですが、残りの実習日でできる限り多くのことを学びたいです。

さて、先週まではデザインの勉強をさせていただきましたが、今日はコーディングを勉強させていただきました。
この2日間は続けて1枚のページをコーディングする勉強をしていたので、まとめてお話させていただきます。

IE困ったちゃん問題

これからお仕事をしていくにあたってぶつかる壁のひとつ、それが「IE困ったちゃん問題」です。
Chromeやfirefoxではきちんと表示されるのに、なぜかIEでは崩れる……などと、数多のWEBデザイナーが膝を折り、涙を流してきたことでしょう。

とは言っても私が勉強している今だと、古いバージョンへの対応はオプションであることが多いようです。
IE6や7への対応が必須な時代じゃなくてほっとしたのが99パーセント、大変さを実感できなくてちょっと寂しいのが1パーセント。

ただ、現在でもIE8以降への配慮は必要。
ということで、今日は私がコーディング中に学んだIE8および9の困ったポイントをご紹介します。
たぶん初心者は同じところで詰まるんじゃないでしょうか？

IE8のこんなところが困る！

border-radiusが効かない

便利なCSS3である角丸。
しかし、IE8では効きません。
今回ぶち当たったのが、「角丸を用いたテキストボックス」でした。
プラグインなどもいろいろとあるのですが、<input>タグには非対応なものが多かった……！

これに対応する現実的な方法は、

• CSS3が聞くようになる「」を導入する
• <input>タグの背景に角丸の画像を指定し、タグの枠線をCSSで消す

などです。
ただし、上の方法はダウンロードしたファイルをサーバーにアップロードしなければならないので注意です。

first-childが効かない

特定の順番に該当する要素にのみCSSを適用させる疑似セレクタも、IE8では効きません。

これも方法としてはたくさんあると思うのですが、私は

• 特定の要素にのみclassを指定する

上の方法でなんとか代用。
ただ、これだと更新作業で要素が増えたり減ったりするたびに指定をかけ直さなければならないのが面倒かな、と思います。

IE9のこんなところが困る！(※一部IE8にも言えること)

jQueryが動かない

めちゃくちゃ困りました……というか今も困っています。
IE8では動くプラグインやコードもIE9だけ動かないことがザラ。

対処法を調べてみましたが、

• $(funciton(){})　の「$」　を　「jQuery」　に変更する
• jQueryのバージョンを変更する

など……

他のブラウザにも言えることですが、IEは特に動かないことが多いと思います。

ここの部分は調べてもすんなり対処法が見つかるわけではないので、慣れと経験則がモノを言いそうですね。

(2/18追記：担当者さんからご指摘いただいたのですが、どうやら今回のIE9でjQueryが動作しない問題は、検証に使用していた「IE TESTER」が原因だったようです。別のWEB検証サービス「modern.IE」で見たところきちんと動作しておりました。

こういうことはよくあるようで、信頼度としては　実機　＞　modern.IE　＞　IE TESTER　とのこと。

検証ソフトやサービスを信頼し過ぎると無駄な時間を使ってしまうということですね……反省。)

まとめ

シンプルなページならそこまで困ることはないけど……

今勉強させていただいているのはシンプルなページなので、そこまで困ることはまだありません。IE6だったらめちゃくちゃ大変でしたでしょうが。

※ただ、あくまでシンプルなページに限った話です。

大切なのは常日頃から調べ、検証していくこと

ひとつ不安に感じていること。

今はまだ勉強させていただいている立場ですが、これから自分の力で制作していかなければならなくなって、調べても解決策が見つからなかったら……ということ。

一般企業のWEB担当だと一人でやることもザラだそうなので、大いにありうる話ですよね。

そのためにはどうするか。

当たり前の話にはなってしまうのですが、「とりあえず目の前のパソコンで検索してみて、模索する」という癖はWEB制作に必須です。

職業訓練では聞けば丁寧に教えてもらえる環境にあったと思いますが、実習では企業の方々のお時間を割いていただいています。

わからないことは、まず調べましょう！

それではまた、次の投稿で。