如何使用 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;
}

透過將「wide」類別分配給下拉列表，解決方法會相應地調整其寬度，解決 IE 差異。

以上是如何使用 jQuery 解決 Internet Explorer 和 Firefox 之間的下拉清單寬度差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！