小编典典

IE中的下拉列表宽度

javascript

在IE中,下拉列表的宽度与下拉框相同(我希望我有道理),而在Firefox中,下拉列表的宽度根据内容而有所不同。

这基本上意味着我必须确保该保管箱足够宽,以显示可能的最长选择。这使我的页面看起来非常难看:(

有没有解决此问题的方法?如何使用CSS为Dropbox和dropdownlist设置不同的宽度?


阅读 273

收藏
2020-04-25

共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>

这是一个jsfiddle示例。希望这可以帮助。

2020-04-25