IE 中的下拉列表宽度 [英] Dropdownlist width in IE
问题描述
在 IE 中,下拉列表的宽度与下拉框的宽度相同(我希望我说得通),而在 Firefox 中,下拉列表的宽度根据内容而变化.
In IE, the dropdown-list takes the same width as the dropbox (I hope I am making sense) whereas in Firefox the dropdown-list's width varies according to the content.
这基本上意味着我必须确保 Dropbox 足够宽以显示尽可能长的选择.这让我的页面看起来很丑:(
This basically means that I have to make sure that the dropbox is wide enough to display the longest selection possible. This makes my page look very ugly :(
是否有解决此问题的方法?如何使用 CSS 为 Dropbox 和下拉列表设置不同的宽度?
Is there any workaround for this problem? How can I use CSS to set different widths for dropbox and the dropdownlist?
推荐答案
这是另一个基于 jQuery 的示例.与此处发布的所有其他答案相反,它考虑了所有键盘和鼠标事件,尤其是点击:
Here's another jQuery based example. In contrary to all the other answers posted here, it takes all keyboard and mouse events into account, especially clicks:
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 结合使用:
Use it in combination with this piece of CSS:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
您需要做的就是将 wide
类添加到有问题的下拉元素中.
All you need to do is to add the class wide
to the dropdown element(s) in question.
<select class="wide">
...
</select>
这是一个 jsfiddle 示例.希望这会有所帮助.
这篇关于IE 中的下拉列表宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!