背景:
客户让我给他们一些下拉菜单。所以我给了他们一些,里面有很多不同的选择。
他们喜欢下拉菜单在 Firefox 和 Chrome 中的显示方式,因为下拉菜单会自动扩展到文本的宽度,如图所示:
但是IE不是这样
Internet Explorer 是 web 开发世界的哥特式青少年,喜欢与众不同的行为,因此它似乎不被同行视为循规蹈矩。它看不到扩展下拉菜单以使用户能够阅读其中包含的所有文本的值(value)。所以它看起来像这样:
这对客户来说不够好,所以他们要求我修复它。我找到了一个 jQuery 插件,它会在你给它焦点时调整文本框的大小,这样当它打开时你可以看到其中的所有文本。此处提供了一个示例:(请确保在 IE8 或更低版本中加载它)
http://jsfiddle.net/tmcNP/3/
问题:
请注意,当您单击 All companies
下拉菜单时,它如何强制下拉菜单进入下一行?有什么方法可以让它保持在同一条线上,并从包含的 div 中“溢出”*?
*不确定在这种情况下这是否是正确的术语。
这是因为插件正在调整 <select>
的大小匹配最长的<option>
在里面。不幸的是,解决这个问题的唯一方法是 position:absolute
选择它的父级内部(设置为 position:relative
)。
实际上,任何内容超出其容纳范围的下拉菜单都会发生这种情况。不幸的是,您无法控制 <select>
的行为,除非您使用 <div>
模拟选择这就是许多 JS UI 框架所做的,例如 Dojo。
我是一名优秀的程序员,十分优秀!