# ie9.jsを使うと出来ること、出来なくなること。 - リンク: https://torounit.com/blog/ie9-js%e3%82%92%e4%bd%bf%e3%81%86%e3%81%a8%e5%87%ba%e6%9d%a5%e3%82%8b%e3%81%93%e3%81%a8%e3%80%81%e5%87%ba%e6%9d%a5%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b%e3%81%93%e3%81%a8%e3%80%82/ - 公開日: 2011-06-07T13:02:14+09:00 - 作成者: Toro\_Unit 最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 # 配布場所 ie7-js [http://code.google.com/p/ie7-js/](http://code.google.com/p/ie7-js/)で配布 されています。 デモは[http://ie7-js.googlecode.com/svn/test/index.html](http://ie7-js.googlecode.com/svn/test/index.html) で見れます。 # 使い方 head内に [html] [/html] と貼り付けるだけです。フッ ターに貼ると誤作動起こす場合がたまに合ったような気がします。 # できるようになること E > F 子セレクタ。直下の子要素にのみ適応するやつ。 E + F 隣接兄弟セレクタ。Eの すぐ下隣に居る弟要素。 E ~ F 間接セレクタ。E以降の弟要素全て。 .class1.class2 クラス の重複指定 :hoverの修正 a以外にも効くようになります。 [attr],[attr=”value”],[attr ~=”value”],[attr|=”value”],[attr^=”value”][attr$=”value”],[attr*=”value”] 属性セレクタ 全般 :before,:after 擬似要素。 :checked,:disabled,:empty,:enabled,:indeterminate,: first-of-type,:last-child,:last-of-type,:not(),:nth-child(),:nth-last-child(),:nth- last-of-type(),:nth-of-type(),:only-child,:only-of-type,:root,:target CSS3の擬似 クラス opacity 透明度がfilter要らずで効くようになります。もちろん内部的にはfilter を使っているのですが。 article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video HTML5で追加された要素にCSSが当たるようになる。html5.jsとかhtml5shiv. jsを同時に読み込む必要はありません。 透過PNGへの対応 ファイル名をhoge-trans.pngに すると動作します。 もしくは、 [js] var IE7_PNG_SUFFIX = ".png"; [/js] とすると全て のPNGに対して有効になります。 また、ie7-squish.jsというIE6のダブルマージンバグやピーカーブーを修正する奴もある ようです。 http://ie7-js.googlecode.com/svn/version/2.1%28beta4%29/ie7-squish.js # 出来なくなること。注意すべきこと。 まぁ便利なのですが、そうそう美味いだけの話というのはなかなか無いもので。 # CSSハックが一部使えなくなる。 個人的にはこれが一番大きいような気がします。 * * html * *:first-child+html 等のセレクタを使うようなハックは動作しなくなりました。まぁセレクタの挙動とかをFix するものなので当然なのでしょうけれど。。。 なので、ただ読み込んだだけで全てがうまく いくようなものではないようです。 # 重くなる ただでさえ、IE6等は重いのに、さらに重くなります。いまどきIE6が動いてるPCは古いです しね。 特に、 [js] var IE7_PNG_SUFFIX = ".png"; [/js] 等は全てのPNGが対象になる ので、PNGをたくさん使うような場合はこの記述は避けたほうが懸命かと思います。 # :before,:after 擬似要素を使うとき、どうやらここに１行分の高さを持った要素が生成されるようです。 なのでclearfix等を擦るときはしっかりheight:0にしないとデザインがおかしくなること があります。 また、擬似要素を生成するとき、 [html] [/html] のような要素を生成するので、このクラスを指定してスタイルを当てることもたまには使える かもしれません。 # 新たに生成された要素にHTML5のタグがある場合 Ajaxなどを使っている場合に起こるのですが、 新しく生成されたHTML5要素には、やっぱり CSSが当たりません。 この場合は、 HTML 5 innerShiv [http://jdbartlett.github.com/innershiv/](http://jdbartlett.github.com/innershiv/) などでやっつけるか、html5要素にcssを当てないだとか、html5要素をそこだけ避けるといった ことが必要です。 ザーッと書き並べてみましたけど、どうでしょう。 自分が痛い目に合った記録みたいに なってますね。 Google AppsもIE7のサポート打ち切りを決めたようなので、早くIE8,IE9等に移行して頂け れば幸いです。切に願っています。 Internet Explorer 8 [http://www.microsoft.com/ja-jp/windows/products/winfamily/ie/function/default.aspx](http://www.microsoft.com/ja-jp/windows/products/winfamily/ie/function/default.aspx) Internet Explorer 9 のダウンロード [http://windows.microsoft.com/ja-JP/internet-explorer/downloads/ie-9/worldwide-languages](http://windows.microsoft.com/ja-JP/internet-explorer/downloads/ie-9/worldwide-languages)