jQueryを使用してInternet ExplorerとFirefoxのドロップダウンリストの幅の違いを解決する方法?

IE ドロップダウン リストの幅の不一致

Internet Explorer では、ドロップダウン リストはドロップボックスの幅を継承しますが、Firefox ではリストに合わせて調整されます。コンテンツ。これは問題を引き起こす可能性があり、最長のオプションを収容するためにドロップボックスのサイズを不必要に大きくする必要があります。

CSS ソリューション

残念ながら、ドロップボックスとドロップダウン リストに異なる幅を設定することはできません。 CSS のみを使用して可能です。

jQuery の回避策

jQuery を使用した回避策は、望ましい効果を達成できます。このソリューションは、さまざまなイベント (フォーカス、マウスオーバー、クリック、マウスアウト、ブラー) をキャプチャし、ドロップダウン リストの CSS クラスを動的に変更します。

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'); });
}

さらに、次の CSS が必要です:

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

「ワイド」クラスをドロップダウン リストに割り当てることで、回避策はそれに応じて幅を調整し、IE の不一致を解決します。

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