IE

[JS]window.open動作検証メモ

2009/03/26 Memo No comments , ,

ブラウザ(とその設定)によってwindow.open()の挙動が大分違う件…
手持ちのPCに入ってるブラウザで検証してみたメモ。(win版のみ)

Firefox3(常にタブ)
window.option(href,name)だと新タブ、window.option(href,name,option)だと新窓

Firefox3(常に窓)
optionの有無にかかわらず新窓

Firefox2
3と同じ

Chrome
新窓で開く設定そのものが無い?(常に新タブで開く)

IE7IE6
どうやら書き方で違うらしい

a.setProperty('onclick',"window.open(this.href); return false;");//→×
a.setAttribute('onclick',"window.open(this.href); return false;");//→×
a.setProperty('onclick',new Function('window.open(this.href); return false;'));</code>//→×
a.setAttribute('onclick',new Function('window.open(this.href); return false;'));</code>//→○
a.addEvent("click",function(){window.open(this.href);return false;});</code>//→○

※target=”_blank”だとsetProperty()でも開く
key同時押しはIE8でも継承されてるらしい

Safari3
開く。新規タブで開く場合はCtrl押しながら

Opera9(初期設定)
タブで開く。

未検証:
IE8 -インストールしてるPCが無い
SleipnirとLunascapeは省略
BETAとスタンドアロンはスルー

setPropertyで動作しないのは盲点でした

[IE] Internet Explorer 8 ドキュメント互換性モードの指定について

2009/03/21 Memo No comments ,

IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。
でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、
IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに
新しくMETA要素の X-UA-Compatible により操作が可能に。

簡単にまとめると

IE8だと表示が崩れる…IE7なら崩れないのに…orz

METAタグでIE7モードで表示するよう指示

IE8がその指示に従ってIE7っぽくレンダリング

ウマー(゚д゚)

ということらしい。

その場合のMETAタグは次のようになる(Emulate IE7 互換性モードを指定)

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

このメタタグはヘッダーの一番上(titleや他のmetaよりも上)に置かなければならない。

その他のcontent 属性値

  • IE=EmulateIE5 → Internet Explorer 5 の動作を模倣
  • IE=edge → 使用できる最高のモードを使用
  • IE=EmulateIE8も使用可能
<meta http-equiv="X-UA-Compatible" content="IE=4"/>   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"/> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"/>   <!-- IE5 mode --> 

各モードをセミコロンで区切って複数のドキュメント モードを指定することも可能らしい。
特定の互換性モードを除外する使い方も可能だが、推奨はされていない。

例:IE7 モードを除外

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

一見便利そうだけど…用途がわからん……

※公式ドキュメントはこちら

でもやっぱりメインで確認するのはIE6なんだろうな、っていう。

(さらに…)

[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone

2009/03/18 MooTools No comments , ,

必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方

適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。

やってる事は大体同じ

  1. 透過する画像を取得
  2. 画像の属性を取得(width,height,alt,src,class,id等)
  3. 新しい要素を作成(このクラスではspan)
  4. 作成した要素に画像の属性を当てる
  5. Style属性で作った要素をスタイリング(AlphaImageLoaderはここ)
  6. img要素を削除またはdisplay:noneにして作成した要素を挿入

(さらに…)

IE3からIE7まで共存・同時起動させる

2008/06/11 Custom No comments , ,

会社に新しい専用PCが届いたので、IE7のStandalone入れるついでに、
他ののバージョンも入れてみようと思ってMultiple IEを入れてみた。
Multiple IEはIE3、IE4.01、IE5.01、IE5.5、IE6がすべてパッケージングされており、個別・同時起動できるソフトです。

IE7と8は入ってないので必要ならそれぞれ別にインストールする必要があります。
あとMultipleIEに入ってるIEは英語版です。

デフォルトページが設定されてると、IE6以下を起動したときにエラー出まくりで落ちてしまうことがあるので
あらかじめインターネットオプションでホームページをabout:blankとかにして、
IE3は最初PC内にあるファイルをドラッグ&ドロップで起動するのがいいと思います。
IE4がなぜか起動できなかった。

このソフトIEがそのまま入ってるようなので、復元したいときにも使えるかも。

[XHTML]buttonタグの挙動について

2008/06/10 HTML&XHTML No comments , ,

フォーム送信などするときに使うボタンはinputとbuttonがあります。
ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。

buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、
送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。

<input type="submit"  name="test" value="send" />

<button type="submit" name="test" value="send">submit</button>

(さらに…)