IE 输入选择框

Question

我正在寻找最简单的解决办法来修复我在Internet Explorer（6,7和8）中遇到的问题，可以是CSS或使用jQuery。 我有一个带有定义宽度的SELECT输入（因为它在布局中所处的位置）。 由于定义了宽度，选择将被切断，无法显示其完整值，而不像在Firefox和Safari中，它们会自动调整大小以显示值的整个长度。

这肯定是一个常见的问题吧？ 有什么建议？

示例代码：

<select id="Grouping_662066" class="productSelectInput" name="AddToCart_Grouping" onchange="DrawProduct(36331,662066,this.value,'',true);">
</select>

我正在使用一个CMS系统，类名为'productSelectInput'是唯一的标识符，将在整个网站中保持一致。ID、name和onchange属性会发生变化。

- mattt

Answer 1

这里有使用jQuery的信息和解决方案，涉及到IT技术问题。

- Angel Chiang

---

那个解决方案充满了错误。它链接到但却被忽略的解决方案更好：http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/ie-select-width-fix.js - Crescent Fresh

解决方案非常有效。您推荐的解决方案相比Crescentfresh有哪些优势？ - mattt

太好了，很高兴它起作用了。我指的是链接底部附近的一些评论。当鼠标在选择框上方/下方移动时，IE的文档会被迅速地移出其流程。也许你的页面中选择框右侧没有任何内容。 - Crescent Fresh

不，我实际上并没有。我想我会坚持使用这个解决方案来建立我的网站。下次我会研究一下你推荐的那个。感谢反馈！ - mattt

crescentfresh，你提到的问题可能是IE6的另一个常见问题引起的：如果内容更宽，则固定宽度的包含块会扩展。标准规定不应该这样。 - Angel

Answer 2

您可以使用常规JavaScript，利用onmousedown、onblur和onchange函数来操作元素的CSS。以下是使用jQuery（使用相同的函数）的解决方案。

    var example = $('#some-id');

    $(example).mousedown(function() {
            $(this).css('width','400px');                            
    });
    $(example).blur(function({
            $(this).css('width','200px');                            
    });
    $(example).change(function() {
            $(this).css('width','200px');                            
    });

- Tim - PlattForm Advertising

Answer 3

考虑到这些限制，我唯一能建议IE浏览器的做法可能是减小字体的大小。

除此之外，我不确定还有其他方法。

- jerebear

Answer 4

就我而言，这是一个浏览器问题（IE）。

您可以使用 来包装选项或在焦点和模糊事件上动态调整选择大小。 此外，您可以使用CSS和JavaScript创建下拉菜单（无需“select”，而是“ul”），并完全控制界面。（onBlur时，JavaScript应将值写入隐藏输入框）。

- macaco

Answer 5

如果IE8支持伪类:focus，您可以在选择时指定更大的宽度。但在IE6中不起作用，可能在IE7中也不起作用。

- wheresrhys