IE ドロップダウン リストの幅の変更

Internet Explorer では、ドロップダウン リストはドロップボックスの幅を反映しますが、Firefox では、ドロップダウン リストはドロップボックスの幅に適応します。内容。この制約により、最長の選択範囲を収容するためにドロップボックスを拡張する必要があり、その結果、Web ページの見た目が美しくなくなります。

さまざまな幅に対する CSS ベースのソリューション

この問題を克服するには、 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'); });
}

このスクリプトを次の CSS と組み合わせます:

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

必要なドロップダウン要素に「wide」クラスを追加することで、これらの変更を適用できます。例:

    ...

この jsfiddle でライブ デモンストレーションを見てみましょう: [link]