wiki代わりの備忘録なので編集や加筆の制限なしエントリーです、あしからず。
また、以下はIEに特化することが目的ではなく、W3C勧告のHTML標準なページ作成を目指す中で、標準を理解しない（くせにトップシェアの）IEの仕様を何とか回避するが主題です。
cssテクまで考慮するともっとたくさんになると思いますが、それはデザイナーさんに任せます（笑）
.
■ IE互換モード
イントラネットでは互換モード優先がIEのデフォルト設定のため、企業イントラネットではIE7の配慮が必要です。ローカルPCでの開発では互換モードを再現できないので注意が必要です。
強制的に互換モードを排除するには、.htaccessに次を記述してHTTPヘッダを出力するか、
Header set X-UA-Compatible "IE=edge"
メタタグでページごとに指定します。
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
しかし、企業イントラネットではどちらも禁止されることがあり、そうなるとブラウザシェアに関わらず今後もIE7を切り捨てることができません。
なお、edgeはその時点での最新バージョン対応のことで、MS自身は使用を避けるべきとしていますが、HTML標準を目指すので当然edgeをポリシーとします。
.
■ UA判定
できればUAによるコード分岐はしたくないのですが、回避できないケースが多々あります。
var _ua = (function(){
return {
ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
mobile:/android|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())
}
})();
.
■ nameによるエレメント指定
IEでは以下の書き方はできません。
$('[name="Test"]')
かならず、indexかselectを指定する必要があります。
$('select[name="Test"]')
.
■ optionの非表示
display:noneを指定してもIEでは消えません。
これが必要なケースでは、ページ起動時にオリジナル選択肢を複写しておき、
$('body').append('<select id="copyTest" style="display:none;"></select>');
$('select[name="Test"]').eq(0).children().clone().prependTo('#copyTest');
select要素の再描画が必要なときに、非表示条件を除外して複写することで、ブラウザ共通コードとできます。
var cur = $('select[name="Test"]').val();
$('select[name="Test"]').children().remove();
$('#copyTest').children().each( function () {
if (非表示の条件) return;
$('select[name="Test"]').append($(this).clone());
});
$('select[name="Test"]').val(cur);
.
■ trの非表示
trをdisplay:noneとしたとき、互換モードでは枠線が残ります。
2、3行の非表示なら気になりませんが、数十行を非表示にするとその分の枠線が重なり真っ黒となります（笑）
メタタグが禁止され互換モードを排除できなかったイントラネット案件では、非表示にするtrをtbodyでくくるhtml文法的には不適切な方法で回避しました。
.
■ rowSpanの値変化
上記枠線が残るのと同根ですが、rowSpanが変化するような行単位の表示・非表示を行ったとき、IE7以前では考察不能な値での調整が必要です。
IE7以前を切り捨てられない場合は、UA判定で別コードを書かざるをえません。
.
■ Array.indexOf
IEにはArrayにindexOfが実装されていません。使用する場合は自分で追加します。
if(!Array.indexOf){
Array.prototype.indexOf = function(target){
for(var i = 0; i < this.length; i++){
if(this[i] === target){
return i;
}
}
return -1;
}
}
.
■ trim
IEにはtrimが実装されていません。使用する場合は自分で追加します。
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
.
■ date.getYear()
通常のブラウザでは getYear = getFullYear - 1900 ですが、IEのみは getYear = getFullYear です。
よって、必ずgetFullYear を使用します。
.
■ Chrome Frame
許されるなら、以下のメッセージで現実逃避したいですね（笑）
<?php
if (!defined('MSIE') && isset($_SERVER['HTTP_USER_AGENT'])) {
if (preg_match('/chromeframe|Opera|Lunascape/', $_SERVER['HTTP_USER_AGENT'])) {
// これらはUAにMSIEが入るがIEではないので無視する
// Lunascapeはエンジン切り替え可能である
// SleipnirもMSIEを含むが、エンジンがIEであるので警告する
}
elseif (preg_match('/MSIE [4-8]\./', $_SERVER['HTTP_USER_AGENT'])) {
// IE 9は除外する
define('MSIE', 1);
}
}
if (defined('MSIE') {
echo 'お使いのブラウザは古いバージョンのIEです。';
echo 'IE9以上にアップデートするか、';
echo '<a href="http://www.google.com/chromeframe/?hl=ja&quickenable=true" target="_blank">';
echo 'パフォーマンス向上のためのプラグイン</a> のインストールを推奨します。';
}
?>
インストールしたChrome Frameを有効にするには、ページに次のメタタグを入れます。
<meta http-equiv="X-UA-Compatible" content="chrome=1">
タグ: IE, javascript
