HTML+CSS
html5に対応していないバグ IE ~8
html5のタグは、IEで適応されない。下記を追加することで対応可
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
なにはともあれIE専用cssを用意して上書きして対応しようそうしよう
<!--[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のバグを思い出す
png問題 IE6~8
- 6.0はpngの透過を表示出来ない
- 7,8はpngのフェードイン、フェードアウトを表示出来ない。
margin autoが効かない
対策
text-align:centerにて対応する
<div class=”wrap”>
<div class=”inner”>
</div>
</div>
.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に含まれている可能性もある）
img{
vertical-align: bottom;
}
画像に予期せぬスペースが入るバグ
以下のように記述していると
似たような症例に、ulリストをfloat:leftで横並びにした時にスペースが入る。
<div>
<img src=”sample.jpg” alt=”” />
</div>
対策：改行が入らないように1行にまとめるか、コメントタグを使って改行コードが入らないようにする。
<div><img src=”sample.jpg” alt=”” /></div>
<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でサイズを指定出来ない
下記コードは正しいサイズで表示されない
div.hoge {
width : 10em;
}
じゃばすく
console.log
エラーが発生するのでコメントアウトするか、使わない。
setTimeout IE 6~9
- 時間がずれる
- setTimeout内の関数がテキストでないと動かない
// setTimeout(function(){alert’aaa’;});がIE全バージョン動かない
var echo = function(str) {
alert(str);
}
setTimeout(“echo ‘aaa’”);
ajaxの同期問題 IE 6~9
/** 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同期通信後に実行する処理を記述
)
配列の最後のカンマを入力するとエラーが起こる
array = [
“aaa”,
“bbb”,
“ccc”, //ここでエラー
]
対処法1
array = [
“aaa”,
“bbb”,
“ccc”,
dummy : null
]
対処法2
coffee使えよ情弱がぁ！
parseIntの引数が必要
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サイトに組み込もう！
結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる
※よいこのみんなは本気でやっちゃらめ！
あらたな提案
IEがアンインストールされるウィルス。
IEのアイコンのまま、中身が気づかぬ間にchromeになるようなウィルスを誰か開発してくれんもんかね。