More than 5 years have passed since last update.

備忘録_IE7 / IE8 / IE9 対策

Last updated at 2017-04-07Posted at 2016-12-25

ターゲットブラウザにIE7案件に遭遇したため調べたことを整理しておく。

ちなみに、IE10以下のサポートは2016年1月に終了している
https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/

HTML対策

HTML5タグの認識

IE9未満はHTML5タグに未対応のためタグをブロック要素として認識させるために「html5shiv」を導入する

導入することでHTML5の構造化タグ(header / footerなど...)には対応できるが動画編集タグ(videoなど)には対応できない

※ちなみに今でも更新されていることに驚いたの内緒・・・

<!--[if lt IE 9]> 
	<script src="./common/js/html5shiv.js"></script>
<![endif]-->

[if lt IE 9] → IE9未満(IE9含まず)に対応
[If lte IE 9] → IE9以下(IE9含む)に対応

補足

情報として下記のコードでOKと書いてあるものもあるが、「googlecode」が終了しているため現在は使用不可。

<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS対策

IEのバージョンごとによる対応の違い

IE8:css3未対応
IE9:css3一部未対応（Animation,Transitionsなどが未対応）
IE10:css3対応

CSS3問題

IE9以下ではCSS3は使用できない。
使用したい場合は、もろもろ設定してあげる必要がある。

Selectivizr.js / IE6 ~ IE8 対策 / lasrcommitは2012年
CSS3PIE / IE6 ~ IE9 対策 / lastcommitは2015年

Selectivizr.js
https://github.com/keithclark/selectivizr

CSS3PIE
https://github.com/lojjic/PIE

使用の仕方は下記ページを参考にさせていただいた。
http://www.hp-stylelink.com/news/2013/09/20130918.php

レスポンシブ対応

IE8以下に関して「CSS3 Media Queries」に非対応のためレスポンシブ対応させるためには「Respond.js」を導入

Respond.js / lastcommitは2015年
https://github.com/scottjehl/Respond

※IE7に置いて「max-widthとmin-width」のinheritには対応していない
※ちなみに「min-heightとmin-width」はIE7から対応している

補足

style要素は対応していない
<link rel="stylesheet" href="test.css">という形で読み込まれたCSSのみ

CSSファイル内の@importに対応していない
cssファイル内で@importして複数のcssを読み込む場合は機能しない

使用の仕方は下記ページを参考にさせていただいた。
http://lab.informarc.co.jp/javascript/ie_responsive_webdesign.html

JS問題

jQueryを使用する際はバージョンに注意

jQueryを使用する際はバージョンに注意する
使用するのは「1.x系」。

babelで変換する際は注意

以下の記事を参考にさせていただいた。
http://qiita.com/k_ui/items/bd728f059f868b8ee528

IEのCSSハック

バージョンごとにプロパティの読み込みをコントロール

下記の記事を参考にさせていただきました
http://qiita.com/feo52/items/7d8176aa99989e9d05f6

対策系

mainタグに関して

mainタグはIE11以下では対応していないためcssでblock指定をする

main {
	display: block;
}

imgタグに関して

IEのimgタグのvertical-alignプロパティがデフォルトでbaselineに設定されている
そのため、画像下に隙間が空いてしまうので下記のようにしておく

※case-by-caseなので適時ベストに設定する

img {
	vertical-align: bottom;
}

hasLayout問題(IEの独自拡張の1つ)

オブジェクトがレイアウトを持っているかどうかを示す。
下記の2つの値がある

false(デフォルト)
レイアウトを持っていない
true
レイアウトを持っている

hasLayoutをtrueにする方法

下記のプロパティを使用することでtrueに設定される

display : inline-block
height : auto以外
float : left or right
position: absolute
width : auto以外
zoom : auto以外

`zoom: 1;`を使用

CSSのバグ対策にzoom: 1;を下記のように設定しておく
zoomプロパティはIE独自なのでバリデータには引っかかる。。。

// 全要素に指定したくないときは個別にどうぞ
*{
	zoom: 1;
}

clearfixの対応

IE7以下では「before・after擬似要素」をサポートしていない。
※「before・after擬似要素」はIE8からサポートされている

下記のようなclearfixを使用する際は「hadLayout」に注意する

// HTML
<ul class="sample">
    <li class="menu">Foo</li>
    <li class="menu">Bar</li>
    <li class="menu">Buz</li>
</ul>

// CSS
.sample {
	*zoom: 1;
}
.sample:after {
	content: '';
	display: block;
	clear: both;
}

PNG画像の透過部分への対応

PNGの透過画像を使用すると表示がおかしくなる問題がある。
PNG-8などにして突破する方法もあるが今回は「背景色を指定」して対応

.img {
	backgroud-color: 適時背景色を指定;
}

その他に、JSのライブラリを当てて対応する方法もあるらしい。

下記のページを参考にさせていただきました。
http://tabayashi.com/dev/null/1527

z-index問題(IE7 / 8)

通常、z-indexプロパティを使用している場合は値によって表示順が指定されるがIE8以下に関して「親要素にz-indexを指定」していない場合は意図した通りに表示されない

//下記のように親要素にもz-indexを指定する
<div style="position:relative;z-index:2;">★
	<div style="position:absolute;z-index:1000;">
		上に表示したいdiv
	</div>
</div>

<div style="position:relative;z-index:1;">★
	<div style="position:absolute;z-index:1;">
		下に表示させたいdiv
	</div>
</div>

下記のサイトを参考にさせていただきました。
http://hacknote.jp/archives/10498/

`opacity`と`background-color: rgba();`の設定に関して

ネット上の説明が色々混ざっていたのでまとめた。
細かい指定は下にそれぞれ書いてある

opacityプロパティの設定のみをしたい場合は下記
※alphaという指定をする

-ms-filter: "alpha( opacity=50 )";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha( opacity=50 );
opacity: 0.5;
zoom: 1;

background-color: rgba();を指定したい場合は下記
※progid:DXImageTransform.Microsoft.Gradient(~)というグラデーションを指定する値を応用して指定をする

.sample{
    background-color: rgba(0,0,0,0.6);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000)";
}

opacity対策(IE7 / 8)

CSS3で追加されたopacityプロパティにIE8以下に対応していない
代わりに「filter」という独自仕様があるのでそれで対応する

-ms-filter: "alpha( opacity=50 )";   // IE8対策
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";    // IE8対策(この指定も可能)
filter: alpha( opacity=50 );         // IE7対策
opacity: 0.5;                        // それ以降

// 動かない場合はhasLayoutの問題に引っかかっている場合があるので下記を追加してい
zoom: 1;

`background-color: rgba();`対策(IE8 / 9)

CSS3で追加されたbackground-color: rgba();はIE8以下に対応していない
代わりに「filter」という独自仕様があるのでそれで対応する

.sample{
	// IE9以上
    background-color: rgba(0,0,0,0.6);
    
    // IE9以下
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000);
    
    // IE8
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000)";
}

// 上記の指定をした場合にIE9に関しては2重に効果がかかてしまうので下記でIE9のfilter設定を無効化
.sample:not(:target){
    filter: none;
    -ms-filter: none;
}

:not(:target)はIE9+ とその他のモダンブラウザに対応しているがfilterプロパティはIE9以下のみ対応なので「IE9」のみの指定ができる

補足

設定に関して

GradientType=0

GradientType=0か1で表記する
グラデーションの方向の設定
0は縦方向、1は横方向。

StartColorStr=#00000000

GradientType=#00000000～#FFFFFFFFで表記する
グラデーションの開始の透明度＋色をaRGB形式で指定

設定の際に注意する => 透明度は最初の2文字、RGBは後半6文字

サンプル)

「＃99ffffff」 => 「255,255,255,0.9」
99はalpha（0.9） / ffffffはRGB（白）

EndColorStr=#00000000

EndColorStr=#00000000～#FFFFFFFFで表記する
グラデーションの終了の透明度と色

細かい指定は　StartColorStr　と同じ

jpeg画像での「#02050a」を使用した際のバグ(IE7 / 8)

「#02050a」が使用されているjpeg画像をjQueryなどでフェードインをさせるとドット落ちのような現象が起こる

発生条件

JavaScript の filter:alpha(opacity); を使用
JPEG画像を使用
#02050a の色を使用

対策

PNG画像などにする
#02050a を使わない
背景色を #02050a にする

`:hover`の指定に関して親要素の高さが変わるバグ(IE7)

ある特定条件下において発生する