none
IE10にて、ドロップダウンリストのツールチップが正しく表示されない。

    質問

  • はじめまして。白黒ストッキングといいます。
    IE10について教えてください。

    既存製品のWebアプリケーション(ASP.NET+.NetFramework2.0)の評価で、
    IE10で画面表示の検証を行っています。
    IE7/8/9で正しくドロップダウンリストのツールチップが表示されていましたが、
    IE10ではツールチップがドロップダウンリストの後ろに隠れるように表示されます。

    ツールチップの表示は、以下のように実装しています。

    toolchip.js

    function showDropItem() {
        var el = document.getElementsByTagName("select");
        for (i = 0; i < el.length; i++) {
            for (j = 0; j < el[i].options.length; j++) {
                el[i].options[j].title = el[i].options[j].text;
            }
        }
    }

    page.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
     ClientScript.RegisterStartupScript(this.GetType(), "startup",
      "window.onload = function() { showDropItem();}", true);
    }

    上記の実装でpage.aspx内のドロップダウンリストに対して、
    ツールチップが表示されるようにしていますが、正しく表示されません。
    長い文字列が登録されているドロップダウンリストだと特に本現象が
    発生しやすいです。

    なお、page.aspxでは、metaタグでX-UA-CompatibleをEmulateIE7に
    設定しています。

    大変お手数ですが、
    ドロップダウンリストのツールチップが正しく表示されない
    原因と対処方法をご教授ください。

    以上、宜しくお願い致します。

    • 移動 佐伯玲 2012年10月19日 2:38 より多くの回答を得る為開発向けのフォーラムへ移動させて頂きます。 (移動元:Internet Explorer)
    2012年10月19日 0:21

回答

  • 白黒ストッキングです。

    大分遅くなりましたが、マイクロソフトに確認してみました。

    IE10の未知の不具合とのことでした。

    IE10であれば全てのドキュメントモードで発生するようです。

    提示された回避策は、メタタグでMSThemeCompatibleをnoにして視覚スタイルを無効にすることらしいです。

    以上、報告まで。

    2012年12月10日 6:22

すべての返信

  • こんにちは、白黒ストッキング さん
    フォーラムオペレータの佐伯 玲 です。

    投稿されたご質問ですが実装側にかなり踏み込んだ内容のご質問なので
    Visual C#」のスレッドのほうがより多くの回答が期待出来るのではないかと思います。
    後ほどカテゴリーを移動させていただこうと思うのですがいかがでしょうか?


    また既にご利用されていたら恐縮ですがIE10での動作検証にはCompat Inspectorを使用されると非常に便利なようで
    MSDN内のIEブログとエバンジェリストのブログを紹介させていただきます。

    IE10 Compat Inspector
    http://blogs.msdn.com/b/ie_ja/archive/2012/02/08/ie10-compat-inspector.aspx
    【IE】 IE10 互換性の考え方と Compat Inspector
    http://blogs.msdn.com/b/hirookun/archive/2012/04/29/10298783.aspx

    ご参考になりましたら幸いです。
    __________________________
    日本マイクロソフト株式会社 フォーラム オペレーター 佐伯 玲


    • 編集済み 佐伯玲 2012年10月19日 1:45
    2012年10月19日 1:44
  • 佐伯さん

    白黒ストッキングです。


    カテゴリー移動の件、了解しました。C#へのカテゴリ移動をお願いします。

    Compat Inspectorについては初めて知りましたので、検証に使わせていただきたいと思います。

    ありがとうございました。

    2012年10月19日 2:34
  • C#に関係なく、完全にIE / HTMLの話題ですよ。<select><option title="タイトル">値</option></select>のHTMLで再現します。

    対策というか、互換モードの使用をやめることでしょうか。

    2012年10月19日 4:04
  • 佐祐理さん

    白黒ストッキングです。回答ありがとうございます。

    まとめると、

     ①IE7互換モード、かつ

     ②ドロップダウンリストにツールチップを埋め込んでいる

     ③ドロップダウンリストの文字列が非常に長い

    Webサイトを、IE10クライアントから参照することによって、本現象が再現するということですね。

    しかし、①IE7互換モードを解除して、再度確認しましたが、本現象が再現しました。

    (ブラウザーキャッシュ等も削除してから確認しています。管理者ツールからも互換モードが解除されていることを確認しています。)

    互換モードの解除以外で回避する方法はないでしょうか?

    IE10のバグなのでしょうか・・・?

    2012年10月23日 0:54
  • IE10上で開発者ツール(F12)を起動し、メニューバーにある「ドキュメントモード」の表示は何になっているでしょうか? こちらで見た感じでは、ドキュメントモードが「IE7 標準」もしくは「IE5 Quirks」のときにツールチップが下に回り込みます。

    つまり「①IE7互換モードを解除して」と書かれていますが解除できていないのかもしれません。X-UA-Compatibleを消したことを意味しているのでしょうが、それ以外の条件でも互換モードになり得ます。

    2012年10月23日 1:32
  • ドキュメントモードは「標準(ページの規定)」になっています。

    ちなみに、こちらでは以下のようなドロップダウンリストにしています。ツールチップもvalueと同じ値を出します。

    <select name="DropDownList_Timezone" id="DropDownList_Timezone" style="width:250px;">
    <option value="Dateline Standard Time">(UTC-12:00) 国際日付変更線 西側</option>
    <option value="UTC-11">(UTC-11:00) 協定世界時-11</option>
    <option value="Hawaiian Standard Time">(UTC-10:00) ハワイ</option>
    <option value="Alaskan Standard Time">(UTC-09:00) アラスカ</option>
    <option value="Pacific Standard Time (Mexico)">(UTC-08:00) バハカリフォルニア</option>
    <option value="Pacific Standard Time">(UTC-08:00) 太平洋標準時 (米国およびカナダ)</option>
    <option value="US Mountain Standard Time">(UTC-07:00) アリゾナ</option>
    <option value="Mountain Standard Time (Mexico)">(UTC-07:00) チワワ、ラパス、マサトラン</option>
    <option value="Mountain Standard Time">(UTC-07:00) 山地標準時 (米国およびカナダ)</option>
    <option value="Central Standard Time (Mexico)">(UTC-06:00) グアダラハラ、メキシコシティ、モンテレー</option>
    <option value="Canada Central Standard Time">(UTC-06:00) サスカチュワン</option>
    <option value="Central America Standard Time">(UTC-06:00) 中央アメリカ</option>
    <option value="Central Standard Time">(UTC-06:00) 中部標準時 (米国およびカナダ)</option>
    <option value="US Eastern Standard Time">(UTC-05:00) インディアナ東部</option>
    <option value="SA Pacific Standard Time">(UTC-05:00) ボゴタ、リマ、キト</option>
    <option value="Eastern Standard Time">(UTC-05:00) 東部標準時 (米国およびカナダ)</option>
    <option value="Venezuela Standard Time">(UTC-04:30) カラカス</option>
    <option value="Paraguay Standard Time">(UTC-04:00) アスンシオン</option>
    <option value="Central Brazilian Standard Time">(UTC-04:00) クイアバ</option>
    <option value="Pacific SA Standard Time">(UTC-04:00) サンティアゴ</option>
    <option value="SA Western Standard Time">(UTC-04:00) ジョージタウン、ラパス、マナウス、サンフアン</option>
    <option value="Atlantic Standard Time">(UTC-04:00) 大西洋標準時 (カナダ)</option>
    <option value="Newfoundland Standard Time">(UTC-03:30) ニューファンドランド</option>
    <option value="SA Eastern Standard Time">(UTC-03:00) カイエンヌ、フォルタレザ </option>
    <option value="Greenland Standard Time">(UTC-03:00) グリーンランド</option>
    <option value="Bahia Standard Time">(UTC-03:00) サルバドル</option>
    <option value="Argentina Standard Time">(UTC-03:00) ブエノスアイレス</option>
    <option value="E. South America Standard Time">(UTC-03:00) ブラジリア</option>
    <option value="Montevideo Standard Time">(UTC-03:00) モンテビデオ</option>
    <option value="Mid-Atlantic Standard Time">(UTC-02:00) 中央大西洋</option>
    <option value="UTC-02">(UTC-02:00) 協定世界時-02</option>
    <option value="Azores Standard Time">(UTC-01:00) アゾレス諸島</option>
    <option value="Cape Verde Standard Time">(UTC-01:00) カーボベルデ諸島</option>
    <option value="Morocco Standard Time">(UTC) カサブランカ</option>
    <option value="GMT Standard Time">(UTC) ダブリン、エジンバラ、リスボン、ロンドン</option>
    <option value="Greenwich Standard Time">(UTC) モンロビア、レイキャビク</option>
    <option value="UTC">(UTC) 協定世界時</option>
    <option value="W. Europe Standard Time">(UTC+01:00) アムステルダム、ベルリン、ベルン、ローマ、ストックホルム、ウィーン</option>
    <option value="Namibia Standard Time">(UTC+01:00) ウィントフック</option>
    <option value="Central European Standard Time">(UTC+01:00) サラエボ、スコピエ、ワルシャワ、ザグレブ</option>
    <option value="Romance Standard Time">(UTC+01:00) ブリュッセル、コペンハーゲン、マドリード、パリ</option>
    <option value="Central Europe Standard Time">(UTC+01:00) ベオグラード、ブラチスラバ、ブダペスト、リュブリャナ、プラハ</option>
    <option value="W. Central Africa Standard Time">(UTC+01:00) 西中央アフリカ</option>
    <option value="GTB Standard Time">(UTC+02:00) アテネ、ブカレスト</option>
    <option value="Jordan Standard Time">(UTC+02:00) アンマン</option>
    <option value="Turkey Standard Time">(UTC+02:00) イスタンブール</option>
    <option value="Israel Standard Time">(UTC+02:00) エルサレム</option>
    <option value="Egypt Standard Time">(UTC+02:00) カイロ</option>
    <option value="Syria Standard Time">(UTC+02:00) ダマスカス</option>
    <option value="South Africa Standard Time">(UTC+02:00) ハラーレ、プレトリア</option>
    <option value="FLE Standard Time">(UTC+02:00) ヘルシンキ、キエフ、リガ、ソフィア、タリン、ビリニュス</option>
    <option value="Middle East Standard Time">(UTC+02:00) ベイルート</option>
    <option value="E. Europe Standard Time">(UTC+02:00) 東ヨーロッパ</option>
    <option value="Kaliningrad Standard Time">(UTC+03:00) カリーニングラード、ミンスク</option>
    <option value="Arab Standard Time">(UTC+03:00) クウェート、リヤド</option>
    <option value="E. Africa Standard Time">(UTC+03:00) ナイロビ</option>
    <option value="Arabic Standard Time">(UTC+03:00) バグダッド</option>
    <option value="Iran Standard Time">(UTC+03:30) テヘラン</option>
    <option value="Arabian Standard Time">(UTC+04:00) アブダビ、マスカット</option>
    <option value="Caucasus Standard Time">(UTC+04:00) エレバン</option>
    <option value="Georgian Standard Time">(UTC+04:00) トビリシ</option>
    <option value="Azerbaijan Standard Time">(UTC+04:00) バク</option>
    <option value="Mauritius Standard Time">(UTC+04:00) ポート ルイス</option>
    <option value="Russian Standard Time">(UTC+04:00) モスクワ、サンクトペテルブルク、ボルゴグラード</option>
    <option value="Afghanistan Standard Time">(UTC+04:30) カブール</option>
    <option value="Pakistan Standard Time">(UTC+05:00) イスラマバード、カラチ</option>
    <option value="West Asia Standard Time">(UTC+05:00) タシケント</option>
    <option value="Sri Lanka Standard Time">(UTC+05:30) スリジャヤワルダナプラコッテ</option>
    <option value="India Standard Time">(UTC+05:30) チェンナイ、コルカタ、ムンバイ、ニューデリー</option>
    <option value="Nepal Standard Time">(UTC+05:45) カトマンズ</option>
    <option value="Central Asia Standard Time">(UTC+06:00) アスタナ</option>
    <option value="Ekaterinburg Standard Time">(UTC+06:00) エカテリンバーグ</option>
    <option value="Bangladesh Standard Time">(UTC+06:00) ダッカ</option>
    <option value="Myanmar Standard Time">(UTC+06:30) ヤンゴン (ラングーン)</option>
    <option value="N. Central Asia Standard Time">(UTC+07:00) ノボシビルスク</option>
    <option value="SE Asia Standard Time">(UTC+07:00) バンコク、ハノイ、ジャカルタ</option>
    <option value="Ulaanbaatar Standard Time">(UTC+08:00) ウランバートル</option>
    <option value="Singapore Standard Time">(UTC+08:00) クアラルンプール、シンガポール</option>
    <option value="North Asia Standard Time">(UTC+08:00) クラスノヤルスク</option>
    <option value="W. Australia Standard Time">(UTC+08:00) パース</option>
    <option value="China Standard Time">(UTC+08:00) 北京、重慶、香港特別行政区、ウルムチ</option>
    <option value="Taipei Standard Time">(UTC+08:00) 台北</option>
    <option value="North Asia East Standard Time">(UTC+09:00) イルクーツク</option>
    <option value="Korea Standard Time">(UTC+09:00) ソウル</option>
    <option value="Tokyo Standard Time">(UTC+09:00) 大阪、札幌、東京</option>
    <option value="Cen. Australia Standard Time">(UTC+09:30) アデレード</option>
    <option value="AUS Central Standard Time">(UTC+09:30) ダーウィン</option>
    <option value="AUS Eastern Standard Time">(UTC+10:00) キャンベラ、メルボルン、シドニー</option>
    <option value="West Pacific Standard Time">(UTC+10:00) グアム、ポートモレスビー</option>
    <option value="E. Australia Standard Time">(UTC+10:00) ブリズベン</option>
    <option value="Tasmania Standard Time">(UTC+10:00) ホバート</option>
    <option value="Yakutsk Standard Time">(UTC+10:00) ヤクーツク</option>
    <option value="Vladivostok Standard Time">(UTC+11:00) ウラジオストク</option>
    <option value="Central Pacific Standard Time">(UTC+11:00) ソロモン諸島、ニューカレドニア</option>
    <option value="New Zealand Standard Time">(UTC+12:00) オークランド、ウェリントン</option>
    <option value="Fiji Standard Time">(UTC+12:00) フィジー</option>
    <option value="Kamchatka Standard Time">(UTC+12:00) ペトロパブロフスク-カムチャツキー - 廃止</option>
    <option value="Magadan Standard Time">(UTC+12:00) マガダン</option>
    <option value="UTC+12">(UTC+12:00) 協定世界時+12</option>
    <option value="Samoa Standard Time">(UTC+13:00) サモア</option>
    <option value="Tonga Standard Time">(UTC+13:00) ヌクアロファ</option>
    </select>


    2012年10月23日 4:20
  • 問題とは関係ないですが、ちょっと気になったので一言・・・

    クライアントスクリプトで title 属性を設定するのではなく、最初から
    サーバー側のコードで設定するようにしてはいかがですか?

    protected void DropDownList1_DataBound(object sender, EventArgs e)
     {
        foreach (ListItem item in ((DropDownList)sender).Items)
        {
            item.Attributes["title"] = item.Value;
        }
     }

    余計なお世話でしたら失礼しました。


    • 編集済み SurferOnWww 2012年10月23日 12:32 誤記訂正
    2012年10月23日 12:29
  • SurferOnWwwさん

    返信ありがとうございます。

    他の画面でも多数のドロップダウンリストを持っているので、サーバー側のビハインドコードでツールチップを設定してしまうと、全てのドロップダウンリストのDataBoundに対して上記の実装が必要になります。

    そのため、Page_LoadでJavaScriptを読み込んで、自動的に全てのドロップダウンリストにツールチップが埋め込まれるよう実装しています。

    2012年10月23日 23:42
  • サーバー側で処置できることはサーバー側で行った方がよいと
    思います。

    ブラウザで JavaScript が必ずしも有効になっているとは限り
    ませんので。

    複数の DropDownList にいちいちイベントハンドラを実装する
    のは面倒と言うことなら、カスタムコントロールまたはユーザ
    ーコントロールで対応できそうです。

    また余計なお世話でしたら失礼しました。

    ASP.NET と IE10 の問題として、既存のブラウザ定義ファイル
    に IE10 が含まれないということがあります。結果、IE10 は
    down-level ブラウザと判定されて、必要な JavaScript が生成
    されないという問題があるそうです。

    Bug and Fix: ASP.NET fails to detect IE10 causing _doPostBack is undefined
    JavaScript error or maintain FF5 scrollbar position
    http://www.hanselman.com/blog/BugAndFixASPNETFailsToDetectIE10CausingDoPostBackIsUndefinedJavaScriptErrorOrMaintainFF5ScrollbarPosition.aspx

    今回の問題とは関係ないかも知れませんが、一度、同等の静的な
    html コードで試してみて、ASP.NET が関係あるかどうか確認して
    はいかがですか。

    2012年10月24日 12:32
  • SurferOnWwwさん

    丁寧なアドバイスありがとうございます。

    同等な静的なhtmlコードを作成し互換モードを解除してみましたが、やはり同様の現象が発生しました。

    ドロップダウンリストにフォーカスが残っている状態でドロップダウンリストを表示すると、特に発生しやすいです。

    IE10の固有問題ということでマイクロソフトに直接確認したほうがよいのかもしれません。

    来週あたり確認してみます。

    2012年10月25日 9:12
  • 白黒ストッキングです。

    大分遅くなりましたが、マイクロソフトに確認してみました。

    IE10の未知の不具合とのことでした。

    IE10であれば全てのドキュメントモードで発生するようです。

    提示された回避策は、メタタグでMSThemeCompatibleをnoにして視覚スタイルを無効にすることらしいです。

    以上、報告まで。

    2012年12月10日 6:22