備忘録_IE7 / IE8 / IE9 対策


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

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

# HTML対策

## HTML5タグの認識

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

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

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

https://github.com/afarkas/html5shiv

```サンプル
<!--[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]-->
```


## 最新のIEでレンダリングを適用させる

```サンプル
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```


# 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 の色を使用

対策

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

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

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

発生条件

- 3重以上の入れ子
- aの2番目の親要素に(背景+ボーダー）or（背景+上下マージン）
- aの3番目の親要素に幅指定

```サンプル
//下記のような構造で発生する
div＞ul＞li＞a:hover
```

対策

- 内側から3番目のブロックで幅を指定しない

サンプルのような構造の場合、`div`よりも外にタグを指定して幅を指定してあげる


下記ページを参考にさせていただいた
http://pentan.info/stylesheet/bug/winie102.html

### 補足

その他にも`:hover`に関してのバグはあるようなので注意する

## footer下の隙間(IE7)

IE7に置いてfooterの下に隙間が空いてしまう場合ある
その場合は下記のように対応

```サンプル
html,body {
	height:100%;
}
```