IEで半透明のSELECTを処理する方法

問題

不透明な歌姫の下にある標準のselect 、IEで完全に表示されたままです。 この機能のため、ドロップダウンメニュー、ポップアップ、およびdivの配置に関連する他のアイテムは非常に乱雑に見えます。

解決策

この問題を解決するにはいくつかの方法があります。 単純なものから複雑なものまでリストします。

1. select非表示
2. select上にiframe
3.自分のselect



詳細

1. select非表示
最も簡単な解決策は、選択(すべてまたはdivと交差)cssのvisibility: hidden;を設定することvisibility: hidden;プロパティvisibility: hidden;
もちろん、すべての選択を検索して、それぞれをプロパティに設定する必要はありません。 cssクラスを定義するだけで十分です。
.noselect select { visibility: hidden; }

そして、divが表示される領域にこのクラスを追加します。
表示スタイルdisplay: none; この場合、収まりません-ページレイアウトがクロールされる場合があります。

2. select上にiframe
おそらく最も興味深いソリューションです。 私にとって完全に理解できない理由で、IEでの選択はiframeを「突破」しません。
つまり 最初にiframeとdivを配置すると、選択はすべての適切なブラウザーのように動作します。
残念ながら、このソリューションは半透明の歌姫には適していません。 (UPD: beartamervitharに感謝)

3.自分のselect
選択なし-問題ありません。 つまり 選択の代わりに、それらの模倣を使用できます。
「オンザフライ」ですべての選択をポップアップディーバに基づくアナログに置き換える既製のスクリプトがあります。 もちろん、これで問題は解決します。
ただし、いくつかのポイントがあります。 まず、選択をシミュレートするときにすべてのスクリプトが完全な機能を提供するわけではありません。 第二に、選択は非標準的な外観になり、これは必ずしも有益ではありません。

他のレシピを知っているなら-私はそれらにとても感謝します。

LJのオリジナル

Source: https://habr.com/ru/post/J21913/


All Articles