IE中的下拉列表宽度 [英] Dropdownlist width in IE

问题描述

在IE中，下拉列表的宽度与dropbox的宽度相同（我希望我有意义），而在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和dropdownlist ？

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;
}

所有你需要做的是添加类广泛的到有关的下拉元素。

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屋！