記事一覧

詳しくはGitHub - arm-band/bugged_form-win7_ie11: テストフォーム(Win7 IE11バグ確認用)を参照。

当該フォーム

  • Windows7
  • Internet Explorer 11 (11.0.9600.18617)

において、

  • dl,dt,ddの子要素にフォームの部品があるフォーム

で、上から順番にTabでフォーカスを移動させると、ラジオボタンの直後のテキストボックスの表示がおかしくなる現象の検証用のフォームです。

なお、当現象はWin10のIE11や、他のブラウザでは発生しませんでした。

症状

下記条件を満たすフォーム・操作で、セレクトボックスの値がおかしくなる。

条件

  • Windows10のIE11を使用(2/17現在、IEバージョン:11.576.14393.0)
  • フォームはセレクトボックスで項目を選択、セレクトボックスの内容はラジオボタンをチェックすると、それに対応した項目のみに絞り込みされる(ラジオボタンをチェックするたびに、JSでoption要素を全削除→ラジオボタンの項目に対応するもののみ再生成している)

操作

  1. IEでラジオボタンで絞り込みを行い、セレクトボックスで項目を選択(上からn番目のAという項目とする)
  2. 項目を選択した状態で、submitで次の画面に遷移
  3. IEの「戻る」で前の画面(セレクトボックスがある画面)に戻る

すると、Windows10のIE11でのみ、ラジオボタンの絞り込みが解除され、かつ絞り込みなしの状態で上からn番目の項目が選択されている。

他のブラウザでは、ラジオボタンの絞り込みは解除されるのは同じだが、選択されている項目は一致している(Aという項目が選ばれたまま)ので、今回のケースでは大きな問題にならない。

また、Windows7のIE11(11.0.9600.18537)では発生せず、Windows10のIE11のみ現象を確認した。

対処(解決せず)

効果がなかった。

ということで、謎現象な上に対処が難しいので保留。History APIを弄ればなんとかなりそうな気はしないでもないが…。

タイトルの通り、IEだけなぜか右端の縦スクロールバーの裏側までページが表示され、全体的に右に寄っているような表示になる現象に遭遇しました。ちなみに、このときのスクロールバーは半透明で、ページからカーソルを離して少し放置するとスクロールバーが消えます(カーソルを乗せ直すと表示される)。

どうも不要な場合はスクロールバーを消して、その分幅いっぱいページを表示しているようなのですが…右下や右上にページトップに戻るボタンを置いているサイトの場合、右端に近い場所だとスクロールバーと重なって使いづらいことに…。

@-ms-viewport {    width: auto;    initial-scale: 1;}

自分のテストサイトでは上記を追加してIEの場合だけ制御を付けることにしました。

…まったく、IEはいつまで経っても余計な事ばかりする…。

参考

これはブラウザに設定する場合の手順ですが、サイトのcssに書いても同様の効果が得られますね。