マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

バージョン間の問題

問題事例は殆どが、バージョン間の動作の違いに起因します。

  • バージョン間の動作の違い、
  • それに起因する問題

については、「IEバージョンアップ情報」を参照下さい。

HTMLの確認

使ってみよう! [F12] IE9 開発者ツール

こちらで、

が可能です

HTMLを確認するには、[F12]で[F12 開発者ツール]を起動し、
メニューの[表示] → [ソース] → [元の形式]でHTMLが確認できます。

HTTPデバッグ

ブラウザでの動作を分析する際には、HTTPデバッグが必須になるので、
以下を参考にして、HTTPのログを取得分析ください(キャッシュ関連の動作など)。

キャッシュ(戻る)

キャッシュの動作

キャッシュの動作は以下に示すように複雑ですので、
必要に応じて都度HTTPデバッグ・プロキシを使用して
HTTPデバッグするのが良いかと思います。

↓Google翻訳で翻訳

また、システムがキャッシュの動作に翻弄されてしまう場合は、
システム的にはサーバサイドでなんとかすると良いかと思います。

  • クロス・ブラウザで、各ブラウザの使用をを理解して・・・
  • パッチなどで動作が変わり得るクライアント・ブラウザの仕様に合わせて・・・

プログラムを作成するという発想が間違いかと思います。

戻る操作

設計思想の異なる、2つのインターネット・バンキングを参考にすると良いかと思います。

  • 三菱東京UFJ銀行
    二重送信やバックサブミットを不正操作に倒す方式で、
    (開発者・技術者にとっては)解り易いのですが、
  • みずほ銀行
    ブラウザの「戻る」ボタンで発生するリクエストも
    (恐らくフラグなどを使用して)理解して処理しているようです。
    #なので、ブラウザの「戻る」ボタンで、業務トップに戻るなどの動作をします。

後者の方がユーザフレンドリですが、当然ですがメリット・デメリットがあります。

デザイン

DPIと単位

長さ(length)の単位 - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0027.html

このように絶対単位はディスプレイで表示する場合、読み手が適切な設定を行っていないと
正しい物理長は計算できないため、絶対単位という名前から受けるイメージとは違い、
実際の表示は環境に大きく依存してしまいます。

DPI

環境:ディスプレイの設定。

  • dpi - Wikipedia
    http://ja.wikipedia.org/wiki/Dpi

    dots per inchの略で、ドット密度の単位である。
    1インチ(1平方インチではない)の幅の中にどれだけのドットを表現できるかを表す。
    なお、dpiで表したドット密度の数値を、単にdpiと呼ぶことがある。

設定方法については下記参照のこと。

Windows8では、解像度の高い環境では、
自動的に『すべての項目のサイズを変更する』の設定が
『中(125%)』などに変更されることがあるようです。

これにより、下記にもある、 スクロールバーの幅 が変更され、問題となることがあります。

単位

WEB作成の豆知識 -単位について-
http://www.web-mame.net/css_course/css_size.html

  • px :画面の1ピクセルの長さを表す単位
  • em :文字の高さを 1em とした単位
  • ex :小文字の「x」の高さを 1ex とした単位
  • in :インチ
  • pt :ポイント(1/72 インチ)
  • pc :パイカ(12 ポイント)
  • cm :センチメートル
  • mm :ミリメートル
  • % :相対的なサイズ指定

表示拡大率

デフォルトの設定

  • 前回ブラウザ終了時の拡大率を使用し、表示します。
  • ただし、以下の場合は指定の拡大率を使用します。
    • 明示的にページ側で拡大率を設定した場合
    • ThirdParty?のadd-onにより各サイトの拡大率を設定した場合

拡大率の設定方法

[インターネットオプション] - [詳細設定タブ]
 - [ユーザ補助] - [新しいウィンドウとタブの拡大レベルをリセット]
をオンにするとすべてのページで100%で表示されるようになる。

ページから制御する方法としては、
あまりお勧めできませんが、以下のような方法があります。

  • zoom属性を利用した方法
  • IEのみの独自仕様であり、バージョンによっても挙動が異なる
    との報告がありますので、安易に利用することは推奨しません。
  • screen.deviceDPIによる方法
  • ブラウザの表示倍率は変更せず、
    表示内容の倍率を内部的に再計算する方法(IEのみ)。

自動調整

拡大率はディスプレイの設定にも依存する。

[コントロールパネル] - [ディスプレイ] - [画面上の文字を読みやすくします]

最近の解像度の高いディスプレイだと、文字が小さく読みずらいため、
見た目上の文字のサイズを大きくする設定となっている。

スクロールバーの幅、ボーダ幅

ブラウザによってスクロールバーの幅、ボーダ幅が異なる。

ブラウザの表示領域幅 その2 - hedgehog’s blog
http://d.hatena.ne.jp/iDrop/20070608/1181273594

IEはWindows OSのテーマが「Windows XP」の場合と、「Windows Classic」の場合とで、スクロールバーのデザインが大きく異なり、それはスクロールバー幅やボーダー幅にも影響を及ぼしています。FirefoxとOperaについては、テーマの違いによるスクロールバーのデザインの変化は一見ありませんが、やはり各値に微妙な差異が生じています。

横スクロールバー表示問題

  • overflow:hidden
  • overflow:auto;

で対応可能。

ただし、overflow-x、overflow-yはIEのみの独自拡張なので、
IE以外のブラウザでは横スクロールバーが出てしまう。

以下のようなケースもあるようですので、基本的には、
クロスブラウザでもサイズが足りるように余裕を持たすのが良いようです。

  • ブラウザ幅を超えた部分を隠す手法としてbody { overflow-x:hidden; } は
    あまり使わない方がいい気がする件 - JeffreyFrancesco?.org
    http://jeffreyfrancesco.org/weblog/2011050801

    例えば Mac のマルチタッチトラックパッドで2本指スクロールが有効な場合、うっかり斜め方向にスワイプしてしまったがために、スクロールした瞬間にコンテンツが消滅したように見えてしまう(実際にははみ出た部分が見えてしまうのですが、スクロールバーが無いのでずれたのかどうかよく分からない)という現象が Safari では時たま発生してしまいます(発生しない事もあるのでこれがまたよく分からない)その他の Firefox や Opera ではそこまで酷い事にはなりませんが、どちらにせよ斜め方向にスワイプしてしまった場合には横側方向にもズレてしまう事に変わりありませんです。

  • IEでoverflowhiddenが効かない - GEKKO CREATORS
    http://gekko-inc.co.jp/gekko_creators/2011/10/css-tips1.php

    IEは子要素に【position:relative;】を指定している場合、親要素の【overflow:hidden;】が効かなくようで、親ボックスにも【position:relative】いれるとIEでも正常に表示されるようです。

  • ???のブログ 消えない縦スクロール - livedoor Blog(ブログ)
    http://blog.livedoor.jp/papi1963/archives/442568.html

    しかしこれをやると縦スクロールバーは”必ず”出なくなるが、そのために横スクロールバーが必要な状況になっても横スクロールバーもでなくなる。つまり、右端は明らかにちょんぎれた状態だが、スクロールバーがでないためスクロールさせてみることができない。そこで、overflow-y:autoとするとスクロールバーが不要のときは表示しないが、横方向がきつくなると、スクロールバーを表示しようとするが、「なぜか」縦スクロールバーを表示し、横スクロールバーも「なぜか」ウィンドウの下端ではなく1つ上がった中途半端な位置にでてくる。ちなみにoverflow-yなしのデフォルトでは常に縦スクロールバーがあり、横スクロールバーは必要な状況となるとウィンドウ下端のまっとうな位置にでてくる。

ブラウザで表示されるフォント

ブラウザで表示されるフォントが異なるケースの対応について。

CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html

  • CSSなどで「正しく」「フォント名」を指定する。
    • 「書体の総称」ではブラウザ毎に解釈が変わる事がある。
    • フォント名でも適切に指定しないと、環境によっては正しく解釈されない。
  • 環境依存もあるので注意する。
    • 第一候補のフォントが環境にインストールされていない場合
    • 同じフォント名でも、書体が違うケースがある。
      • Vistaの新MSフォントのうちの168文字は、改正後JIS X0213に基づいたデザインとなった。
      • WindowsXPに標準搭載されているMS明朝・MSゴシックのバージョンは2.3(V2.3)
      • Vistaに標準搭載されるMS明朝・MSゴシックのバージョンは5.0(V5.0)

IE n 互換モード

こちらを参照。

IEイベント

F1抑止

onhelpイベントで抑止します。

<!-- onhelpイベントを無効にする。-->
<script language="javascript" for="document" event="onhelp">
 event.returnValue = false;
</script>

秘文AE WebGuard?のIEアドオンが有効の場合は、
上記イベント抑止が機能しないことがあるようです。

「×」ボタン抑止

今の所、出来ないという結論

技術的問題

IEのクローズ処理をハンドリングする - 開発思考実験日記
http://d.hatena.ne.jp/dotnetmemo/20070125/1169742909

  • JavaScript(onbeforeunload)を使用した方法は抜けが多いため推奨はしない。
  • 更新ボタンを押してもCloseだと判断してしまう問題がある。
  • event.clientXを使用して「x」ボタンを識別する方法もあるが、
  • ワイドディスプレイなどで、動作が変わる事がある。
  • event.clientXをもっと厳密に調べるアイデア(あまり推奨できる方法が無い)
    ● 「File->close」や「Alt-F4」には対応できないようだ。
    ● 「x」ボタンの付近でF5押しても誤った認識をしてしまう。
  • Win32、ActiveX系
    • IWebBrowser2(ie_OnQuit?)も

イベント自体を止めることはできないので、
フラグとJavaScriptと組み合わせるなどしないといけない。

  • Win32、ActiveXの処理でActiveXをロードして処理する場合、
    ActiveXが何時ロード、アンロードされるかなどもポイントとなる。
  • IE8からタブ毎のプロセスになっており、
    高度なフィージビリティスタディが必要になる。

要件的問題

要件自体に問題があるとも考えられる。

  • そもそもWebのコンテンツがホストのブラウザを制御する
    と言う発想にリテラシ(セキュリティ)的な問題がある。
  • 従って、いざお金を出すと言う所で「要件がオカシイ」と気が付くため、
    IEのクローズ処理を制御する旧製品なども販売不振であった。
  • また、その操作性(IEの×系抑止)が、基本的に実現できるものと、
    お客に思われてしまうのもあまり良くないのではないか?と思います。
    例えば、onbeforeunloadで実現したものが全社的に適用された後、
    抜けを直して欲しいなどの要求が増えてくると難しくなってきます。

ログオフ、Sessionクリア

  • JavaScript(onbeforeunload)中でSubmitするように実装しますが、上記と同様に困難。
  • なお、onunloadではunload後になるので、サブミットされません(以下、HPを参照)。
  • Sessionタイムアウトを短めに設定し、タイマーで定期的にリクエストを送り
    ユーザが画面を開いている間は、Sessionタイムアウトさせない方式も採れます。
  • Open棟梁には、ユーザ操作中のSessionタイムアウトを防ぐため、
    Webサーバへ一定期間毎にPINGを行うHttpPing?()メソッドが用意されています。

画面サイズ拡大・縮小の制御

Ctrl + 「+」(画面サイズ拡大)および
Ctrl + 「-」(画面サイズ縮小)はJavaScriptで抑止できない。

  • 動作検証を行ってみたところ、
    onkeydown、onkeypressイベントが
    発生するよりも先に拡大縮小が行われています。

Select Boxの切替前確認

実装方法

以下で実現可能の様です。

JavaScript SELECT BOX の OnChange? をキャンセルする - MyMemoWiki?
http://typea.info/tips/wiki.cgi?page=JavaScript+SELECT+BOX+%A4%CE+OnChange+%A4%F2%A5%AD%A5%E3%A5%F3%A5%BB%A5%EB%A4%B9%A4%EB

  • onbeforeactivateイベントで設定を記憶しておき、
onbeforeactivate = "this.previouse_selected_value=this.value;";
  • onchangeイベントで切替前確認を表示します。
    onchangeイベントでfalseを返すと、変更をクリアできます。
onchange="if(window.confirm(message)){}else{this.value=this.previouse_selected_value;return false;};"
  • なお、
    • onbeforeactivateイベント
    • previouse_selected_valueプロパティ

はIE限定のようなので、他のブラウザでは、
onload+onchangeイベントで変更前の値を記憶する必要があります。

ASP.NETのDropDownList?

AutoPostBack?="True"設定時、onchangeにdoPostBack?が仕掛けられます。
これにより、onchangeイベントに以下のjavascriptが仕掛けられます。

onchange="javascript:setTimeout(
 '__doPostBack(\'ctl00$ddlMDropDownList1\',\'\')', 0)" 

これも、onchangeイベントでfalseを返すと、変更をクリアできます。

サンプル

全イベントの抑止サンプルは、Open棟梁付属のJavaScriptに同梱しています。
https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Scripts/touryo/ie_key_event.js

モーダルダイアログ全般

モーダルダイアログのサポート状況

こちらを参照。

モーダルダイアログでポストバック

モーダルダイアログwindowでポストバックすると、別windowが表示される。

対応方法

下記の方法がある。

  • <base>タグに_selfを指定する
    <head runat="server">
     <base target="_self"></base>
    </head>

ただし、JavaScript

  • 子画面側でフォーカス移動ができなくなった。
  • 子画面から親画面側のダイアログを動作できなくなった。

などの問題が報告されている。

  • FRAMESET、FRAMEの踏み台を経由する。
    <HTML>
     <HEAD>
      <TITLE></TITLE>
     </HEAD>
     <FRAMESET rows="*" frameborder="0" border="0" framespacing="0">
      <FRAME id="frameDialog" name="frameDialog" src="実際の子フォーム.aspx" noresize scrolling="no" frameborder=0>
     </FRAMESET>
    </HTML>

ちなみにOpen棟梁のモーダルダイアログ表示機能では、こちらの方法を採用している。
但しこの機能には1点問題があり、IE以外ではsrcに指定した画面から
showModalDialog?の引数(vArguments)が取得できず、動作しないことがある。

  • window.open()でモーダル化
    // 戻り値の子画面オブジェクトを取得 
    var subwin = window.open(page, null, param); 
    
    // 子画面の表示状況を確認する関数 
    function chkSubWin() { 
     if(subwin != null && subwin != "") {
      // 子画面が閉じたか否か
      var ret = subwin.closed;
      // 子画面が閉じてない場合は子画面にフォーカス
      if(ret == false) { 
       subwin.focus();
      } 
     } 
    } 

注意

  • しかし、昨今、この互換モードが問題となるケースが増えてきた。
    このため、互換モードを使用しないようにする場合、FRAMESETをIFRAME化する必要がある。
  • ただし、IFRAME内のコンテンツからshowModalDialog?の戻り値が戻らなくなるので、
    cookie等を使用してIFRAME内のコンテンツから戻り値を戻すように処理を変更する必要がある。

参考情報

親ウィンドウが触れてしまう。

WWWブラウザのダイアログ(showModalDialog?)は、OSレベルのダイアログではないので、
稀にブラウザのバグに起因し、親画面が触れる現象の報告がある(バグ情報が見つかり次第報告)。

  • e.g.
    Spy++を使用して確認可能。
  • メモ帳のバージョン情報
    • クラス名:#32770 (ダイアログ)
    • クラス スタイル:CS_DBLCLKS
  • IEのダイアログ(showModalDialog?
    • クラス名:Internet Explorer_TridentDlgFrame?
    • クラス スタイル:CS_DBLCLKS

描画の問題

settimeout化

javascript - IE9 Alert() now blocks range.select from displaying selected text - Stack Overflow
http://stackoverflow.com/questions/13021294/ie9-alert-now-blocks-range-select-from-displaying-selected-text

IEのバージョンが変更され、

  • 描画タイミング
  • JavaScriptの実行タイミング

が変わって、問題となるケースがあるようです。

対応方法としては、settimeout化が挙げられますが、

  • IE6側の動作を変えてしまう。
  • IE9側も厳密には意図する動作に合わせられない。

ため、機械的にsettimeout化すれば良いという訳ではない様です。

ActiveX

Win7、IE9、VBCOMの問題

こちらを参照。

ダウンロード全般

PDF、CSV、Officeなど、詳しくは、
こちら(ダウンロードのいろいろ)を参考にしてください。

その他

IE:タブのプロセス分割

こちらを参照。

IE10で"__doPostBack" 実行エラー

こちらを参照。

WWWブラウザのメモリ・リーク


Tags: :その他、開発の色々


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-06-14 (木) 17:32:32 (7d)