一种判断选项是否适合选择的方法 - 在IE中

Question

在IE6中,可能是7,如果你将a的宽度设置为auto以外的任何值,如果select中的选项比select的宽度宽,它们会被切断.这是不好的.Firefox很聪明,不能这样做.

问题:如何判断选项是否被javascript切断？

你怎么处理这个问题,然后将宽度设置为自动？

Answer 1

好问题.这里有点咆哮,但IE的<select>控件实现很糟糕.它有以下问题(其中我肯定):

• (正如您所注意到的那样)在<select>切断<option>元素上设置宽度,无论overflow指令如何
• 无论位置和分层()指令如何,它们都具有超越页面上所有其他控件的神奇能力z-index.对于"对话"小部件的早期开发人员来说,这是一个巨大的PITA; 对话框背后的任何下拉都会因为对话本身的过度而流血.
• 你不能禁用个别<option>元素
• 你不能隐藏/显示个别<option>元素
• 在<select>并不反映所选设置CSS样式<option>
• 无法将innerHTML属性设置为新选项的字符串
• 如果您没有value在每个上设置属性<option>,则mySelectBox.value静默失败
• 当使用键盘箭头浏览<option>元素列表时,change事件会在每次击键时触发(Opera也有这个问题)
• <option>s和<optgroup>s 上的css样式通常完全被忽略(仅限backgound-color和color工作)
• 以编程方式更改选项列表隐藏了下拉列表(这对于希望下拉列表保持可见的"提前输入"实现尝试很糟糕)
• IE7会在显示时尝试适应屏幕上的所有选项.对于大型列表,这意味着下拉内容在显示时会超出下拉列表(这本身并没有错,但它与其他IE版本不一致)

至于您的问题,一种解决方案是在显示选项时切换width到"auto",并在关闭选项时设置是否返回到设置宽度,如下所示:http://css-tricks.com/select-cuts-关的选项功能于即修复/

这样做的明显缺点是,作为相邻元件的文件流动的螺旋都会移动以考虑width:auto设置.