IE中的下拉列表宽度

在IE中,下拉列表与dropbox的宽度相同(我希望我有意义),而在Firefox中,下拉列表的宽度根据内容而有所不同.

这基本上意味着我必须确保Dropbox足够宽以显示尽可能长的选择.这使我的页面看起来很难看:(

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

这是另一个基于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到相关的下拉元素中.

    ...

这是一个jsfiddle的例子.希望这可以帮助.

创建自己的下拉列表更令人痛苦.您可以使用一些JavaScript来使IE下拉工作.

它使用了一些YUI库和一个特殊的扩展来修复IE选择框.

您将需要包含以下内容并将您的元素包装在一个

将这些放在页面的body标签之前:

邮寄验收编辑:

您也可以在没有YUI库和Hack控件的情况下执行此操作.你真正需要做的是选择元素上放一个的onmouseover ="this.style.width ='自动’"的onmouseout ="this.style.width ='100px的’"(或任何你想要的).YUI控件为它提供了很好的动画,但它没有必要.这个任务也可以用jquery和其他库来完成(虽然我还没有找到明确的文档)

- 对编辑的修改:
IE对选择控件的onmouseout有问题(它不考虑将鼠标悬停在选项上的鼠标悬停选项上).这使得使用mouseout非常棘手.第一个解决方案是迄今为止我发现的最好的解决方案.

---

我在这两个链接上得到404

3> 小智..：

---

你可以试试以下......

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.}" 
  onblur="this.style.position='';this.style."

我试过,它对我有用.不需要其他任何东西.

4> Justin Fishe..：

---

我使用了以下解决方案,它在大多数情况下似乎运行良好.

One Two - A long option that gets cut off in IE

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});