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

ヘルプを表示

スキルを磨く
トレーニングの探索
新機能を最初に入手
Microsoft Insider に参加する

この情報は役に立ちましたか?

翻訳品質にどの程度満足していますか?

どのような要因がお客様の操作性に影響しましたか?

その他にご意見はありますか?(省略可能)

フィードバックをお送りいただきありがとうございます!

×