html – 修复大小下拉选项中的长文本(IE中的限制视图)

Possible Duplicate:
07000

我有一个合理长文本的下拉列表.它在Firefox中显示得很好,但是当我在Internet Explorer中点击它时显示有关其大小的文本.

<select style="width:100px;" id="test">
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
</select>

当您在firefox中打开带有上述下拉列表的页面并单击以查看其值时,它将显示完整的描述.
但在Internet Explorer中,单击时它只显示100px,其余文本被激活.

是否有任何方法可以在单击下拉菜单时查看完整的文本.它在Firefox中显示？

解决方法

这是一个由浏览器呈现引擎和控制器的控件呈现.某些CSS属性可能无法正常工作.为了达到你的目标,尝试制作一些像这样的自定义控件

HTML标记：

<ul  id="test">
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
</ul>

CSS: 

    #test li{
display:block;
background-color:#CCCCCC;
border:1px #FFF solid;
display:none;
width:auto;
cursor:pointer;
}
#test li:hover{
background-color:#999999;
}

jQuery的：

$("#test li:first").css({'width':150+'px','display':'block','border':'1px #000 solid','overflow':'hidden','cursor':'pointer'});
    $("#test li:first").toggle(function(){
                        $(this).siblings().css({'display':'list-item','width':'auto'});
                        },function(){
                        $(this).siblings().css({'display':'none'});
                        }

这只是它的粗略草图.