Internet Explorer でドロップダウン リストの幅の不一致を処理する方法は?

IE でドロップダウン リストの幅を調整する方法

Internet Explorer では、ドロップダウン リストは関連するドロップボックスの幅を継承します。ただし、Firefox などの他のブラウザでは、リストの幅がコンテンツに合わせて調整されるため、外観に不一致が生じます。これにより、最も長いアイテムを収容するためにドロップボックスの幅が拡張されると、ページ内に過剰な空白が生じる可能性があります。

この問題に対処するには、jQuery と CSS を利用することで回避策を提供できます。以下の jQuery コードは、フォーカス、マウスオーバー、マウスアウト、クリック、ぼかしなど、ドロップダウン リストの幅を切り替えるさまざまなイベントを処理します。

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

この jQuery コードを次の CSS で補完します。

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

この CSS はドロップボックスの固定幅を設定し、150 ピクセルなどの希望の幅を指定できます。ドロップダウン リストが展開されると、「expand」クラスが適用され、コンテンツに基づいて自動計算された幅で固定幅をオーバーライドします。

このソリューションを使用するには、単に「wide」クラスを関連するリストに追加します。ドロップダウン要素:

<select class="wide">
    ...
</select>

このアプローチにより、ブラウザー間で幅が均一になると同時に、ドロップダウン リストが必要に応じて拡大および縮小できるようになり、IE 固有の幅継承の問題が解決されます。

以上がInternet Explorer でドロップダウン リストの幅の不一致を処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。