IE Fuck!(ieのバグまとめ)


## HTML+CSS

### html5に対応していないバグ IE ~8

html5のタグは、IEで適応されない。下記を追加することで対応可

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

### なにはともあれIE専用cssを用意して上書きして対応しようそうしよう

```sample.html
<!--[if IE]>
 <link href="ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
```

### @importの読み込み順バグ

@importでcssをモジュール化した場合、IEのみ読み込み順が上からではなく、ランダムに読まれる。よってreset.cssなどがあとに読まれたりしてバグる。
@importは3階層以上深くは潜れない

### z-indexの値が認識されない(ie6,ie7)

2つのdivの親要素が別々でz-indexは指定しない場合、IE6とIE7以外のブラウザは子要素のz-indexの値が優先されるが、IE6とIE7は親要素の出現順が影響します。
参考サイト[IEのz-indexのバグを思い出す](http://www.culture27.com/blog/2011/04/z-index)


### png問題 IE6~8

- 6.0はpngの透過を表示出来ない
- 7,8はpngのフェードイン、フェードアウトを表示出来ない。

### margin autoが効かない

対策
text-align:centerにて対応する

```sample.html
<div class=”wrap”>
 <div class=”inner”>
 </div>
</div>
```

```sample.css
.wrap {
 text-align: center;
}

.inner {
 width: 960px; /*margin:autoのためには横幅の指定が必要*/
 text-align: left; /*テキストを左寄せに戻す*/
 margin: 0 auto; /*ie以外のセンタリング*/
```

### 画像の下の隙間が出来る

IEのimgタグのvertical-alignのデフォルト設定がbaselineになっている
対策：vertical-alignをbottomに設定する。
（reset.cssに含まれている可能性もある）

```sample.css
img{
 vertical-align: bottom;
}
```

### 画像に予期せぬスペースが入るバグ

以下のように記述していると<div>内の改行コードが小さいスペースとなって表れる。
似たような症例に、ulリストをfloat:leftで横並びにした時にスペースが入る。

```sample.html
<div>
 <img src=”sample.jpg” alt=”” />
</div>
```

対策：改行が入らないように1行にまとめるか、コメントタグを使って改行コードが入らないようにする。

```sample1.html
<div><img src=”sample.jpg” alt=”” /></div>
```

```sample2.html
<div><!--
   --><img src=”sample.jpg” alt=”” /><!--
--></div>
```


### font-sizeにキーワードを指定するとバグる

フォントサイズに「small, middle」などのキーワード指定を行った場合、IEの描画モードによって表示されるサイズが異なる。

### float 内の line-heightを無視するバグ(ie7)

要素内にfloatとline-heightを指定すると、line-heightが無視される。（別にその要素を内包する要素にline-heightを作る。）

### IE7で対応していないセレクタ

- a:focus
- a:before
- a:after


### min-height,min-widthはie6まで未対応(ie7から対応可能)

### CSS ボックス要素は、emでサイズを指定出来ない
下記コードは正しいサイズで表示されない

```sample.css
div.hoge {
  width : 10em;
}
```

## じゃばすく

### console.log

エラーが発生するのでコメントアウトするか、使わない。

### setTimeout IE 6~9

- 時間がずれる
- setTimeout内の関数がテキストでないと動かない

```sample.js
// setTimeout(function(){alert’aaa’;});がIE全バージョン動かない
var echo  = function(str) {
   alert(str);
}
setTimeout(“echo ‘aaa’”);
```

### ajaxの同期問題 IE 6~9

```sample.coffee
/** 1. jsonpの問題
* jsonpとは、セキュリティ上外部ドメインのjson情報を取得出来ない制限を突破するために、jsonでは無くcallback関数を渡してjsonを取得する技術
* IEのみ、特別に指定しないとうごかない */
// cache : false、dataType : “jsonp”は必須
@ajax = $.ajax({
     type        : "GET"
     cache       : false
     url         : url
     dataType    : "jsonp"
     contentType : "application/json"
     success     : (data)->
       //成功時に実行
})

/** 2. jsonpの適応させるサーバーの設定 */
jsonpのレスポンスヘッダ。IEだと’text/html’にすると受け付けません。サーバーサイドで、’application/json;charset=utf-8′などにする必要があります

/** 3. ajax同期通信に対応していない問題
* jqueryのajaxは`async : false`にすることで、同期通信( 処理を待つ )ことが出来るようになる。
* しかし当然IEは対応していない。
*/
// 下記で同期通信は出来ない
@ajax = $.ajax({
     type        : "GET"
     async       : false
     cache       : false
     url         : url
     dataType    : "jsonp"
     contentType : "application/json"
     success     : (data)->
       // 成功時に実行
})

// 対策 : $.Dferredで待ち受ける
$.when(@ajax).done(
 ->
   //ajax同期通信後に実行する処理を記述
)
```

### 配列の最後のカンマを入力するとエラーが起こる

```sample.js
array = [
 “aaa”,
 “bbb”,
 “ccc”, //ここでエラー
]

対処法1
array = [
 “aaa”,
 “bbb”,
 “ccc”,
 dummy : null
]

対処法2
coffee使えよ情弱がぁ！

```

### parseIntの引数が必要

```sample.js
var width = ‘16px’;
var numWidth = parseInt(width); //これはダメ
var numWidth = parseInt(width, 10) // 第二引数を入力しましょう
```

### ieにはindexOfがない

indexOfにまつわる話。
配列内を検索するのにindexOf使ったら、
IEに「そんなメソッドねーよバカ」と怒られました。
例えば、こんなの。

```
var list = ["hoge","fuga"];
if(list.indexOf("hoge") !== -1){
 console.log("配列にhogeいるよねぇ〜");
}

// 対策 下記を先頭に追記
(!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(elt /*, from*/) {
   var len = this.length >>> 0;
   var from = Number(arguments[1]) || 0;
   from = (from < 0)
   ? Math.ceil(from)
   : Math.floor(from);
   if (from < 0)
     from += len;
   for (; from < len; from++) {
     if (from in this &&
         this[from] === elt)
       return from;
   }
   return -1;
 };
}
```

## ここまで読んでうんざりした人へ

渾身のネタ()はこちら↓
[IEユーザーを撲滅させるためのjavascript。さぁ今すぐWEBサイトに組み込もう！ ]
(http://qiita.com/items/08334fbfaa24e9a8b0fb)

> 結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる

*※よいこのみんなは本気でやっちゃらめ！*


## あらたな提案

IEがアンインストールされるウィルス。
IEのアイコンのまま、中身が気づかぬ間にchromeになるようなウィルスを誰か開発してくれんもんかね。