Internet Explorer で固定幅の選択ドロップダウンによってコンテンツが切り詰められるのはなぜですか?それを修正するにはどうすればよいですか?

IE で固定幅のドロップダウンを選択するとコンテンツが切り取られる

問題の説明:

の場合固定幅の選択ドロップダウンを使用すると、特定の項目に指定された幅を超えるテキストが含まれる場合があり、その結果、 Internet Explorer (IE) ブラウザーでの切り捨て。 IE6 および IE7 では、ドロップダウン リストは指定された幅に制限されているため、長い項目の完全な内容を表示することはできません。

CSS および HTML:

提供された CSS および HTML コードは、問題:

select.center_pull {
    width: 145px;
}

<select></select>

解決策:

IE 8 以降:

IE 8 以降の場合、シンプルな CSS ベースのソリューションにより、問題:

select:focus {
    width: auto;
    position: relative;
}

このルールは、ドロップダウンがフォーカスされているときに最も長い項目を収容できるようにドロップダウン リストの幅を調整します。

IE 7 以下:

残念ながら、IE 7 以下では :focus セレクターがサポートされていないため、問題に対処するには追加のテクニックが必要です。 truncation:

• JavaScript: JavaScript を使用して最も長い項目の幅を動的に計算し、それに応じてドロップダウン リストの幅を設定します。
• CSS ハック: CSS ハックを使用して、IE のドロップダウン リストを強制的に拡大します。たとえば、width: auto ルールを適用します。特に IE ブラウザでは優先度が高くなります。

以上がInternet Explorer で固定幅の選択ドロップダウンによってコンテンツが切り詰められるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。