![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Open棟梁Project - マイクロソフト系技術情報 Wiki
問題事例は殆どが、バージョン間の動作の違いに起因します。
については、「IEバージョンアップ情報」を参照下さい。
使ってみよう! [F12] IE9 開発者ツール
こちらで、
が可能です
HTMLを確認するには、[F12]で[F12 開発者ツール]を起動し、
メニューの[表示] → [ソース] → [元の形式]でHTMLが確認できます。
ブラウザでの動作を分析する際には、HTTPデバッグが必須になるので、
以下を参考にして、HTTPのログを取得分析ください（キャッシュ関連の動作など）。
キャッシュの動作は以下に示すように複雑ですので、
必要に応じて都度HTTPデバッグ・プロキシを使用して
HTTPデバッグするのが良いかと思います。
↓Google翻訳で翻訳
また、システムがキャッシュの動作に翻弄されてしまう場合は、
システム的にはサーバサイドでなんとかすると良いかと思います。
プログラムを作成するという発想が間違いかと思います。
設計思想の異なる、２つのインターネット・バンキングを参考にすると良いかと思います。
後者の方がユーザフレンドリですが、当然ですがメリット・デメリットがあります。
長さ(length)の単位 - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0027.html
このように絶対単位はディスプレイで表示する場合、読み手が適切な設定を行っていないと
正しい物理長は計算できないため、絶対単位という名前から受けるイメージとは違い、
実際の表示は環境に大きく依存してしまいます。
環境：ディスプレイの設定。
dots per inchの略で、ドット密度の単位である。
1インチ（1平方インチではない）の幅の中にどれだけのドットを表現できるかを表す。
なお、dpiで表したドット密度の数値を、単にdpiと呼ぶことがある。
設定方法については下記参照のこと。
Windows8では、解像度の高い環境では、
自動的に『すべての項目のサイズを変更する』の設定が
『中（125%）』などに変更されることがあるようです。
これにより、下記にもある、 スクロールバーの幅 が変更され、問題となることがあります。
WEB作成の豆知識 -単位について-
http://www.web-mame.net/css_course/css_size.html
[インターネットオプション] - [詳細設定タブ]
- [ユーザ補助] - [新しいウィンドウとタブの拡大レベルをリセット]
をオンにするとすべてのページで100%で表示されるようになる。
ページから制御する方法としては、
あまりお勧めできませんが、以下のような方法があります。
拡大率はディスプレイの設定にも依存する。
[コントロールパネル] - [ディスプレイ] - [画面上の文字を読みやすくします]
最近の解像度の高いディスプレイだと、文字が小さく読みずらいため、
見た目上の文字のサイズを大きくする設定となっている。
ブラウザによってスクロールバーの幅、ボーダ幅が異なる。
ブラウザの表示領域幅 その2 - hedgehog’s blog
http://d.hatena.ne.jp/iDrop/20070608/1181273594
IEはWindows OSのテーマが「Windows XP」の場合と、「Windows Classic」の場合とで、スクロールバーのデザインが大きく異なり、それはスクロールバー幅やボーダー幅にも影響を及ぼしています。FirefoxとOperaについては、テーマの違いによるスクロールバーのデザインの変化は一見ありませんが、やはり各値に微妙な差異が生じています。
で対応可能。
ただし、overflow-x、overflow-yはIEのみの独自拡張なので、
IE以外のブラウザでは横スクロールバーが出てしまう。
以下のようなケースもあるようですので、基本的には、
クロスブラウザでもサイズが足りるように余裕を持たすのが良いようです。
例えば Mac のマルチタッチトラックパッドで2本指スクロールが有効な場合、うっかり斜め方向にスワイプしてしまったがために、スクロールした瞬間にコンテンツが消滅したように見えてしまう（実際にははみ出た部分が見えてしまうのですが、スクロールバーが無いのでずれたのかどうかよく分からない）という現象が Safari では時たま発生してしまいます（発生しない事もあるのでこれがまたよく分からない）その他の Firefox や Opera ではそこまで酷い事にはなりませんが、どちらにせよ斜め方向にスワイプしてしまった場合には横側方向にもズレてしまう事に変わりありませんです。
IEは子要素に【position:relative;】を指定している場合、親要素の【overflow:hidden;】が効かなくようで、親ボックスにも【position:relative】いれるとIEでも正常に表示されるようです。
しかしこれをやると縦スクロールバーは”必ず”出なくなるが、そのために横スクロールバーが必要な状況になっても横スクロールバーもでなくなる。つまり、右端は明らかにちょんぎれた状態だが、スクロールバーがでないためスクロールさせてみることができない。そこで、overflow-y:autoとするとスクロールバーが不要のときは表示しないが、横方向がきつくなると、スクロールバーを表示しようとするが、「なぜか」縦スクロールバーを表示し、横スクロールバーも「なぜか」ウィンドウの下端ではなく１つ上がった中途半端な位置にでてくる。ちなみにoverflow-yなしのデフォルトでは常に縦スクロールバーがあり、横スクロールバーは必要な状況となるとウィンドウ下端のまっとうな位置にでてくる。
ブラウザで表示されるフォントが異なるケースの対応について。
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
こちらを参照。
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と組み合わせるなどしないといけない。
要件自体に問題があるとも考えられる。
Ctrl + 「+」（画面サイズ拡大）および
Ctrl + 「-」（画面サイズ縮小）はJavaScriptで抑止できない。
以下で実現可能の様です。
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 = "this.previouse_selected_value=this.value;";
onchange="if(window.confirm(message)){}else{this.value=this.previouse_selected_value;return false;};"
はIE限定のようなので、他のブラウザでは、
onload＋onchangeイベントで変更前の値を記憶する必要があります。
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/C%23/Samples/WebApp_sample/ProjectX_sample/Framework/Js/ie_key_event.js
こちらを参照。
モーダルダイアログwindowでポストバックすると、別windowが表示される。
下記の方法がある。
<head runat="server"> <base target="_self"></base> </head>
ただし、JavaScriptで
などの問題が報告されている。
<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棟梁のモーダルダイアログ表示機能では、こちらの方法を採用している。
但しこの機能には１点問題があり、IE以外ではsrcに指定した画面から
showModalDialog?の引数（vArguments）が取得できず、動作しないことがある。
// 戻り値の子画面オブジェクトを取得
var subwin = window.open(page, null, param);
// 子画面の表示状況を確認する関数
function chkSubWin() {
if(subwin != null && subwin != "") {
// 子画面が閉じたか否か
var ret = subwin.closed;
// 子画面が閉じてない場合は子画面にフォーカス
if(ret == false) {
subwin.focus();
}
}
} こちらを参照。
WWWブラウザのダイアログ（showModalDialog?）は、OSレベルのダイアログではないので、
稀にブラウザのバグに起因し、親画面が触れる現象の報告がある（バグ情報が見つかり次第報告）。
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のバージョンが変更され、
が変わって、問題となるケースがあるようです。
対応方法としては、settimeout化が挙げられますが、
ため、機械的にsettimeout化すれば良いという訳ではない様です。
こちらを参照。
PDF、CSV、Officeなど、詳しくは、
こちら（ダウンロードのいろいろ）を参考にしてください。
こちらを参照。
こちらを参照。
