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

【问题标题】：a way to tell if options do not fit inside of a select - in IE一种判断选项是否不适合选择的方法 - 在 IE 中
【发布时间】：2009-10-21 03:17:49
【问题描述】：

在 IE6 和 7 中，如果您将 an 的宽度设置为除 auto 以外的任何值，如果该选择内的选项比选择的宽度更宽，它们就会被截断。这是不好的。 Firefox 足够聪明，不会这样做。

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

除了将宽度设置为自动之外，您是如何处理此问题的？

【问题讨论】：

【解决方案1】：

好问题。这里有点咆哮，但 IE 对<select> 控件的实现非常糟糕。它有以下问题（我敢肯定）：

（如您所见）在<select> 上设置宽度会切断<option> 元素，无论overflow 指令如何
他们有这个magic ability to sit overtop of all other controls on the page，不管位置和分层（z-index）指令。对于“对话框”小部件的早期开发人员来说，这是一个巨大的 PITA。对话框后面的任何下拉菜单都会从对话框本身的顶部溢出。
you cannot disable individual <option> elements
you cannot hide/show individual <option> elements
<select> 不反映所选 <option> 上设置的 css 样式
can't set the innerHTML property to a string of new option items
如果你这样做不在每个<option> 上设置value 属性，mySelectBox.value 会静默失败
当使用键盘箭头在<option> 元素列表中导航时，change 事件会在每次击键时触发（Opera 也有这个问题）
<option>s 和 <optgroup>s 上的 css 样式通常会被完全忽略 (only backgound-color and color work)
以编程方式更改选项列表会隐藏下拉菜单（这对于希望下拉菜单保持可见的“提前输入”实施尝试很糟糕）
IE7 会在显示时尝试适应屏幕上的所有选项。对于大型列表，这意味着下拉内容在显示时将位于下拉列表之上（这本身并没有错，但与其他 IE 版本不一致）

至于您的问题，一种解决方案是在显示选项时将width 切换为"auto"，并在关闭选项时将 if 设置回设置的宽度，如下所述：http://css-tricks.com/select-cuts-off-options-in-ie-fix/

这样做的明显缺点是，当相邻元素全部移动以考虑width:auto 设置时，会破坏文档的流程。

【讨论】：

如果你认为这是一个很好的问题，你可以给它 +1 分
感谢您提供所有其他额外信息，我不知道其中一些事情，现在我知道了 =)。至于那个 css-tricks 解决方案，是的，它很糟糕，因为它改变了所有看起来真的太丑陋的东西，我无法使用它

【解决方案2】：

看看 Chris Coyier 的 this post。

【讨论】：