28

IEを使用する場合、選択した入力要素の上に絶対位置のdivを配置することはできません。これは、select要素がActiveXオブジェクトと見なされ、ページ内のすべてのHTML要素の上にあるためです。

ポップアップdivを開くときにselectを非表示にしているユーザーを見たことがあります。これにより、ユーザーエクスペリエンスがかなり悪くなり、コントロールが消えてしまいます。

FogBugzには、ポップアップが表示されたときにすべての選択をテキストボックスに変換する、非常にスマートなソリューション（v6より前）が実際にありました。これによりバグが解決され、ユーザーの目を騙しましたが、動作は完全ではありませんでした。

もう1つの解決策は、FogBugz 6にあります。ここでは、select要素を使用せず、どこでも再コーディングします。

私が現在使用している最後の解決策は、IEレンダリングエンジンを台無しにして<div>、ActiveX要素として絶対位置にあるものもレンダリングするように強制し、選択した要素の上に存在できるようにすることです。これは、<iframe>内部に非表示を配置し、次のよう<div>にスタイリングすることで実現されます。

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

誰かがこれよりもさらに良い解決策を持っていますか？

編集：この質問の目的は、実際の質問であると同時に有益です。この<iframe>トリックは良い解決策だと思いますが、アクセシビリティを低下させるこの醜い役に立たないタグを削除するなどの改善を探しています。

4

10 に答える 10

8

Iframeより良いものは何も知りません

しかし、いくつかの変数を探すことで、これをJSに追加できると思います。

  1. IE 6
  2. 高いZ-Index（divをフローティングしている場合はz-indexを設定する必要がある傾向があります）
  3. ボックス要素

次に、これらのアイテムを検索し、iframeレイヤーを追加するだけのスクリプトが適切なソリューションになります

ポール

于 2008-08-16T16:06:35.840 に答える
5

iframe ハック ソリューションをありがとう。それは醜く、それでもエレガントです。:)

ただのコメント。SSL 経由でサイトを実行している場合は、ダミーの iframe タグに src を指定する必要があります。そうしないと、IE6 がセキュリティ警告を表示します。

例：

    <iframe src="javascript:false;"></iframe>

src を blank.html に設定することを推奨する人もいますが、私は JavaScript の方が好きです。図に行きます。

于 2009-04-22T21:41:18.963 に答える
2

私の知る限り、選択肢は2つしかなく、そのうちの1つは前述のiframeの使用法です。もう1つは、オーバーレイが表示されたときにすべての選択を非表示にすることで、さらに奇妙なユーザーエクスペリエンスをもたらします。

于 2008-08-11T17:00:44.437 に答える
1

このプラグインhttp://docs.jquery.com/Plugins/bgiframeを試してみてください。動作するはずです!

利用方法：$('.your-dropdown-menu').bgiframe();

于 2011-02-03T16:53:41.417 に答える
0

ないと思います。私は自分の仕事でこの問題を解決しようとしました。選択コントロールを非表示にすることは、私たちが思いつくことができる最善の方法でした（キャプティブオーディエンスを持つ企業ショップであるため、ユーザーエクスペリエンスは通常PMの決定に影響しません）。

解決策を探すときにオンラインで収集できたものから、これに対する良い解決策はありません。私はFogBugzソリューション（Facebookなどの多くの有名なサイトで行われているのと同じこと）が好きで、これは実際に私が自分のプロジェクトで使用しているものです。

于 2008-08-11T16:48:03.557 に答える
0

選択ボックスとFlashでも同じことをします。

オーバーレイを使用する場合は、押し通す下にあるオブジェクトを非表示にします。それは素晴らしいことではありませんが、機能します。JavaScriptを使用して、オーバーレイを表示する直前に要素を非表示にし、完了したら再び表示することができます。

どうしても必要な場合を除いて、iframeをいじらないようにしています。

オーバーレイ中に選択ボックスの代わりにラベルまたはテキストボックスを使用するコツは巧妙です。将来的にはそれを使うかもしれません。

于 2008-08-11T17:07:30.647 に答える
0

Mootools には、iframeshim と呼ばれる iframe を使用した非常によくできたソリューションがあります。

このためだけにライブラリを含める価値はありませんが、プロジェクトにライブラリがある場合は、「iframeshim」プラグインが存在することに注意してください。

于 2009-12-20T09:44:09.367 に答える
0

bgiframe と呼ばれるシンプルでわかりやすい jquery プラグインがあります。開発者は、ie6 でこの問題を解決するためだけに作成しました。

私は最近使用しましたが、それは魅力のように機能します。

于 2010-04-30T15:48:10.697 に答える
0

select 要素を非表示にする場合は、display: none の代わりに "visibility: hidden" を設定して非表示にします。それ以外の場合、ブラウザーはドキュメントをリフローします。

于 2011-06-02T13:58:21.247 に答える