Internet Explorer : してログ

IEでは meta の viewport 指定が効きませんが、CSS に書いても無視されるので何でかなと思っていました。 検索しても特にそんな報告は見当たらないし、みんな同じことしか書いてないので八方塞がりになっていました。 試行錯誤の結果、分かったことは「width=device-width」という書き方で問題なく、「width=1280」のような書き方では無視されるということ。 でも何となく「width=1280px」のように単位を入れてみたら、IE でちゃんと認識してくれました。 画面のサイズを指定するということで「入るのはピクセル単位だけ」という思い込みが、なかなかその考えに至らなかったということになります。

IE では下記のように書いても無視される
<meta name="viewport" content="width=device-width">
有効なCSSの記述例
@-ms-viewport {
  width: device-width;
}
無効なCSSの記述例
@-ms-viewport {
  width: 1280;
}
有効なCSSの記述例(単位pxが必要なだけ)
@-ms-viewport {
  width: 1280px;
}

HTML5 で作られたページを IE8 で表示させたときに、互換モードで表示されてしまい、レイアウトが崩れるという事態に遭遇しました。 調べてみると、META タグで互換モードへ落ちるのを防げるらしいので、試してみました。 下記のような記述を、<head> の直後に書いたところ、アドレスバーの脇に出ていた互換モードのアイコンが消えました。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Windows7 の上位エディションには、仮想マシンで Windows XP を実行できるライセンスが付いています。 一般的な仮想マシンのようにウィンドウ内で Windows XP を実行する OS モードと、Windows7 のデスクトップ上で Windows XP のアプリケーションを実行できる仮想アプリケーションモードがあります。 で、その仮想アプリケーションモードでは、Windows XP に後からインストールしたアプリケーションしかメニューに出てこないため、最初から入っている Internet Explorer は利用できないのかと思っていました。 しかし、次のように手動で登録することにより、実行できることが分かりましたので紹介します。

  1. XP mode を OS モードで起動します
  2. 次のフォルダを開きます「C:\Documents and Settings\All Users\スタート メニュー\プログラム」
  3. Internet Explorer のショートカットを先のフォルダに作ります
  4. Windows7 のプログラムメニューに自動的に公開されます
  5. XP mode を終了します(仮想アプリケーションモードと共存できないため)

InternetExplorer 8 は、まだ要求仕様になることがあり、これならデバッグを効率的に行うことができます。 もちろん、自動更新を停止して IE6 や IE7 を Windows7 上で表示させることも可能です。

FormData があると Ajax でファイルアップロードできるようになって大変便利なのですが、困るのが IE8 と IE9 の対応です。 IE10 からは FormData が使えますが、未だに IE8 の要求は来ます。 かつての IE6 のポジションを受け継いでいる臭が漂っています。

諦めて POST で画面リロードするところでしたが、ちゃんと調べて見ると代替策がありました。 使うのは POST ですが、見せ方としては非同期通信っぽく動きます。 サンプルコードは載せませんが、要点を箇条書きにしますので、参考にしてください。

  • 親ページに iframe を配置して見えないようにします(display:none だと Safari でまずいみたいなので、横幅&縦幅をゼロにします)
  • フォームのターゲット要素(target="<iframe名>")で、配置した iframe を指定します
  • サーバー側で POST を受け取ったら、JavaScript で親ページの関数を呼んで通知するようにします
  • 親ページでは関数が呼ばれたら、アップロード完了などのメッセージを提供できます

最近のブラウザは、showModalDialog で開いたウィンドウ内の遷移は普通に行えます。 しかし、IE8 では新しいウィンドウが開いてしまします。 ググると、iframe を入れて面倒なことして回避している輩もおられるようですが、そんなことしたくないですよね。 いろいろと調べてみると、海外のサイトに解決方法を見つけました。

IE8 はどうやらベースとなるターゲットが親ウィンドウかなんかに指定された状態で、ダイアログがオープンされているようです。 html のヘッダー部分に、ベース・ターゲットを自分自身にするよう指定すれば良いみたいです。

ベースターゲットの指定
<base target="_self" />

PHP でファイルを生成しブラウザにダウンロードさせるような処理なのですが、IE8 だけエラーが出てダウンロードできないようでした。 色々と調べてみると「Cache-Control: no-cache」が出ていると起こるようですので、下記のようにして対応しました。 最初は「Content-Disposition」に「attachment」を付けるとダメだと書いてあるサイトがあって悩みましたが、どうやら関係無いようです。

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.urlencode($attachmentname));
header("Cache-Control: public");
header('Content-Length: '.strlen($dat));
echo $dat;

IE8 よ、XP と共に去れ

「オブジェクトでサポートされていないプロパティまたはメソッドです。」

この呪文の詠唱を IE が始めたら、とりあえずマウスぶん投げて甘いもんでも補給しましょう。 さて、今回は trim が原因なのですが、なんと IE8 は実装されていません。 このような基本的な、文字列操作が実装されていないなんて、はっきり言って思いもよりませんでした。 まさに(・・)です。

ならば、正規表現なんかを使って解決してもいいのですが、jQuery が使える状態なら、下記のようにすれば良いと思います。 少し前なら IE6 がー、とか言ってたけど、IE8 お前もなのか。。。 Microsoft は間違えなく、インターネットの発展の足を引っ張ってると思います。

IE8 で動かないコード
var after = before.trim();
jQuery での代替
var after = $.trim(before);

そろそろ IE6 サポートしなくていいってならんかねー。
今日も他じゃ動くのに IE6 だけだめってのあって無駄にした数時間。あ〜あ勿体無い。

Google Maps API v3 で単純な地図インターフェイスを実装なんだけど、連想配列の最後のカンマひとつ多いだけな単純ミスを、えらい苦労して突き止めたところです。

var myOptions = {
zoom: 6,
center: new google.maps.LatLng(37,138),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};

この true の後ろのカンマ。
PHP とかだと付いてても無視してくれるんだが、IE6 だと素っ頓狂な行目を差して「オブジェクトがありません」とか言うもんだから、「API 読み込めてないんかな?」などと見当違いな場所を調べてみたり、v3 の IE6 対応を疑ってみたり。カンマ一個のために何時間使ったんだか。。。

一応、表示されるようになったし、機能的には問題なさげなんだけど、コントロールの位置が重なってたり、ちょっとオカシなところもあるようだ。しかし、良くできてる Google さんには頭が下がります。

※この記事は「Yahoo!ブログ - HDRp」からの転載です