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,其余文本被激活.
解决方法
这是一个由浏览器呈现引擎和控制器的控件呈现.某些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'});
}
这只是它的粗略草图.
