Internet Explorer 10 でドロップダウン リストのツールチップがリストの後ろに表示されることがある

現象
Internet Explorer 10 で、ドロップダウン リスト (select 要素) を含む Web ページを表示します。
ドロップダウン リストをクリックして展開し、項目をマウスでポイントした時、option の title 属性に指定した文字列がツールチップとして表示されますが、Internet Explorer 10 では、ツールチップがリストの後ろに表示され、隠れて見えない場合があります。

例えば、この問題は以下のような HTML で発生します。

<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"></head><body><select style="width: 300px">  <option value="1" title="****************************** This is the number 1 option ******************************">One Thing</option>  <option value="2" title="****************************** This is the number 2 option ******************************">Two Thing</option>  <option value="3" title="****************************** This is the number 3 option ******************************">Three Thing</option>  <option value="4" title="****************************** This is the number 4 option ******************************">Four Thing</option>  <option value="5" title="****************************** This is the number 5 option ******************************">Five Thing</option>  <option value="6" title="****************************** This is the number 6 option ******************************">Six Thing</option>  <option value="7" title="****************************** This is the number 7 option ******************************">Seven Thing</option>  <option value="8" title="****************************** This is the number 8 option ******************************">Eight Thing</option>  <option value="9" title="****************************** This is the number 9 option ******************************">Nine Thing</option>  <option value="10" title="****************************** This is the number 10 option ******************************">Ten Thing</option></select></body></html>

 : この問題は以下の場合に発生しやすくなります。
  • select 要素に width あるいは height のスタイル指定を行っている
  • 互換表示 (IE7 標準あるいは IE5 Quirks のドキュメント モード) を使用している

回避策
select 要素で width あるいは height のスタイル指定を行わない、かつ IE8 標準モード以降のドキュメント モードを使用することで、問題の発生頻度を軽減できます。
また、Web ページの "視覚スタイル" を無効にすることにより、問題を回避できます。以下の設定で "視覚スタイル" を無効にできます。

  1. [ツール] メニューから [インターネット オプション] を起動します。
  2. [詳細設定] タブをクリックします。
  3. [Web ページのボタンとコントロールで視覚スタイルを有効にする] のチェックをはずし、[OK] ボタンをクリックします。 
あるいは、Web ページで以下のように meta 要素を追加することでも "視覚スタイル" を無効にできます。

<meta http-equiv="MSThemeCompatible" content="no">

関連情報
MSThemeCompatible の meta 要素については、以下のドキュメントを参照してください。

http-equiv attribute | httpEquiv property
http://msdn.microsoft.com/en-us/library/ms533876.aspx
注意 : これは、マイクロソフトのサポート組織内で直接作成された "緊急公開" の資料です。 この資料には、確認中の問題に関する現状ベースの情報が記載されています。 情報提供のスピードを優先するため、資料には誤植が含まれる可能性があり、予告なしに随時改定される場合があります。 その他の考慮事項については、使用条件を参照してください。
プロパティ

文書番号:2801090 - 最終更新日: 09/29/2016 14:45:00 - リビジョン: 3.0

Windows Internet Explorer 10

  • KB2801090
フィードバック