如何保持SELECT Element的宽度小但OPTION灵活

Question

问题:

我的下拉列表是动态加载的,有一些选项很长,这会弄乱我的页面布局.我希望select元素的大小很小,但扩展后,允许用户看到所有长的options.要做到这一点,我设置了width的SELECT,以一个固定的值,例如,width:200px;

预期/期望的行为(在Chrome中有效)

IE8中的实际行为

我尝试过的:

select{
    overflow:show;
}
option{
    overflow:show;
    width:1000px;
}

简化的好词:

http://jsfiddle.net/gCbhq/2/

Answer 1

好.不确定这是否有帮助.我正在使用Jquery Mobile,我的选择按钮仅限图标(= 28px).在IE8上我所有的选择因此也是28px.

我修好了这个:

select { min-width: 150px !important; }

但这只能起作用,因为Jquery Mobile隐藏了选择并将它自己的元素添加到"顶部".

唉,这是一个修复 - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Answer 2

所有你可以做的就是破解它所以它看起来很接近.只能通过添加/更改select单独的CSS来模拟Chrome行为.

这是尽可能接近而不添加任何其他元素:

http://css-tricks.com/examples/SelectCutoffFix/ (点击返回顶部的文章了解实施细节)

上面的解决方案是您可以用您所要求的最佳解决方案,而不是周围的其他元素select.

如果你愿意div在select(没有替换或特殊的UI小部件)周围添加一个小样式,你可以让它看起来更好一些:

http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

(详情请见:http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/)

这个解决方案与我所看到的一样接近你正在寻找的东西.据说这是一个黑客,并有一些问题:

• 如果option连续两次选择相同的内容,则在焦点离开之前,预期的行为不会启动select
• 当select打开时,向下箭头按钮消失(因为溢出被​​隐藏的div隐藏)

上面的解决方案会让你更接近,但它们看起来都不如我想要的那么精致.但是,如果您无法在页面中添加任何其他内容,这些将是您的最佳选择(基于过去无数个小时的研究).是的,它很糟糕,但我们都在同一条船上.

祝好运!