javascript - IE 中的下拉列表宽度

Question

在 IE 中，下拉列表的宽度与下拉框的宽度相同(我希望我说得有道理)，而在 Firefox 中，下拉列表的宽度根据内容而变化。

这基本上意味着我必须确保保管箱足够宽以显示可能最长的选择。这让我的页面看起来很丑:(

这个问题有解决办法吗？如何使用 CSS 为下拉框和下拉列表设置不同的宽度？

Answer 1

这是另一个 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 添加到相关的下拉元素中。

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

Here is a jsfiddle example .希望这会有所帮助。