IE8 未対応・不具合・注意点 まとめ

スクリプトを書いてて出てきたものや、調べ物しながら出てきたものなど未確認のもありますが、まとめてみました。

基本的にCSS3の要素は使用出来ない

css3 transition, transform
css3: :first-child 以外の擬似クラス (未確認)
css3: text-shadow (未確認)
css: rgba で指定した色

opacity は効かない

IE 独自の filter を使用する必要があります
filter: ‘alpha(opacity=0)’;

・jQuery のアニメーションを行う場合
$dom.css({filter: ‘alpha(opacity=0)’}).animate({opacity: 1}):
私の環境では上記のようにする必要がありました。

background-size・background-clip・複数の背景画像(未確認)

jQuery(JS)で画像のロードをする場合に attr(‘src’, ‘image.png’); 等を load の前に置くと動かない

// 動かない
$(img).attr('src', url).on('load', function() {
	...
});

// 動く
$(img).on('load', function() {
	...
}).attr('src', url);

width, height のパーセンテージ

良くは調べていないのですが
width: 500%; height: 500%;
等と指定すると綺麗に拡大されないようです

透明度指定がある子要素に position absolute か relative があるとその子要素に透過がされない

#id * 等で全選択かけるか * { filter: inherit; } を使うと適用されるようになります

・max-width: 100% で画像が表示されなくなる(詳細不明)
参考: http://creatorclip.info/2013/09/ie8-img-max-width-bug/

jQuery の $(‘‘).attr(‘src’, ‘image.png’); 等で要素を指定すると height, width 属性が勝手に追加される

$(‘‘);
など、何かを追加することで追加されなくなりましたが…原因がよくわかりません…

他のブラウザでは動作する状態でIEでのみ動かない状況で、デベロッパーツールを開くと問題なく動いてしまうプログラム

スクリプトの最後に

if (!window.console){
    window.console = {
        log : function(msg){
            // do nothing.
        }
    };
}

を追加すると動くようです(未確認)

スクロールアニメーションのセレクター

他のブラウザでは $(‘body’) で問題無いが、IEだと $(‘html,body’)としないと動作しませんでした。

※1 http://creatorclip.info/2013/09/ie8-img-max-width-bug/