Question

在Mozilla和非IE浏览器中，如果选择列表的选项长度大于选择的宽度，则会显示。但是在IE中，它会将选项裁剪到选择的宽度。

有没有办法让IE的选择行为与非IE浏览器一样？

Answer 1

这似乎可以很好地强制IE重新评估选择宽度。适用于IE7和IE8。

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}

Answer 2

的CSS：

.set_width { width:120px; }

HTML：

<select class="set_width"><option>one</option><option>two</option></select>

Answer 3

我喜欢26design的解决方案，但它有两个缺陷：

在某些情况下，可以将鼠标悬停事件触发两次，从而导致origWidth变量设置为“auto”，从而阻止选择恢复为原始大小。
如果下拉列表中的文本值不需要额外的空间，那么select实际上会收缩看起来很奇怪。

此版本修复了这两个问题：

if($.browser.msie) {
    /* IE obscures the option text for fixed-width selects if the text 
     * is longer than the select. To work around this we make the width 
     * auto whenever the drop down is visible.
     */
    $("select.fixed-width").livequery(function(){
        /* Use mousedown rather than focus because the focus event gets 
         * interrupted and the dropdown does not appear 
         */
        $(this)
        .mousedown(function(){
            if($(this).css("width") != "auto") {
                var width = $(this).width();
                $(this).data("origWidth", $(this).css("width"))
                       .css("width", "auto");
                /* if the width is now less than before then undo */
                if($(this).width() < width) {
                    $(this).css("width", $(this).data("origWidth"));
                }
            }
        })
        /* Handle blur if the user does not change the value */
        .blur(function(){
            $(this).css("width", $(this).data("origWidth"));

        })
        /* Handle change of the user does change the value */
        .change(function(){
            $(this).css("width", $(this).data("origWidth"));

        });
    });
}

在IE6-8中测试

Answer 4

我放在一个表格单元格中，只是试图与单元格保持相同的宽度。

$("#id" ).width($("#id" ).parent().width());

不过，感谢所有帖子，这对我有很大帮助。

Answer 5

好的，所以这是我经过一段时间后想出来的解决方案。它将根据子选项的最大宽度自动增加选择框的大小。

<script type="text/javascript">
  window.onload = function()
  {
    var elem = document.getElementById('test');
    var values = elem.length;
    var biggest_value = 0;
    var biggest_option = '';

    for(var i = 0; i <= values; i++)
    {
      if (elem.options[i])
      {
        var len = elem.options[i].value.length;
      }

      if (biggest_value < len)
      {
        biggest_value = len;
        biggest_option = elem.options[i];
      }
    }

    document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';

};
</script>

选择框：

<select id="test">
 <option value="Hello">Hello</option>
 <option value="Hello Again">Hello Again</option>
 <option value="Hello Yet Again">Hello Yet Again</option>
</select>

Answer 6

确保选择列表的绝对最简单的方法总是与它们需要的一样宽，是允许浏览器设置它们的宽度，即不要自己设置宽度。这个“方法”（实际上是非方法，因为它涉及不做某事）将适用于所有浏览器，甚至是IE6。

Answer 7

我有一个适合我的解决方案，所以我想我会继续发布它（在底部有一些警告）。我确信这不是jQuery的最有效使用，但是我的工作方式正在发挥作用。基本上，我有一个时区列表（显然）是相当长的文本字符串。

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("select.timeZone")
        .mouseover(function() {
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto")
                .focus();
        })
        .mouseout(function() {
            $(this)
                .blur(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
                .change(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
        });
    });
</script>
<![endif]-->

说明

仅限IE浏览器设置。

此解决方案是Chris Coyier（http://css-tricks.com/select-cuts-off-options-in-ie-fix/）提供的脚本的修改版本。

另外，这个解决方案假设你和我一样，并不那么关心IE6。基本功能就在那里，因此IE6浏览器仍然可以看到大多数选择选项，提交表单等，但我不能再浪费时间来安抚这个小子组了。

<强>注意事项：

选择列表在聚焦之前具有固定的宽度。

Onmouseout，在将尺寸设置回原始固定宽度之前，必须模糊或更改列表。我之前确定选择列表模糊或更改的原因是因为之前，只要您的鼠标离开选择框，onmouseout就会启动（这意味着您可以尝试选择一个选项，但它们会在您点击一个选项之前消失）。

相反，在鼠标悬停时，焦点设置为确保正确触发模糊事件。

Answer 8

这是另一种对我有用的方法：

<style>
select.limited-width {
    width: 200px;
    position: static;
}

select.expanded-width {
    width: auto;
    position: absolute;
}
</style>

<select class="limited-width" 
        onMouseDown="if(document.all) this.className='expanded-width';"
        onBlur="if(document.all) this.className='limited-width';"
        onChange="if(document.all) this.className='limited-width';">

    <option>A normal option</option>
    <option>A really long option which messes everything up</option>
</select>

通过切换到position：absolute，您可以从页面流中删除元素，这有助于在展开时找到移动的选择框。

我选择依赖于嗅探document.all作为IE的检查，因为它保持紧凑并避免需要单独的功能。如果这对您不起作用，请在IE条件注释中定义一个函数，然后调用它。

一个小错误，如果你选择相同的元素，它将不会再缩小，直到你将焦点移动到另一个元素，我称之为一个功能; - ）

Answer 9

for (i=1;i<=5;i++){
       idname = "Usert" + i;
       document.getElementById(idname).style.width = "100%";

}

当宽度未正确显示时，我用这种方式显示下拉列表。

适用于IE6，Firefox和Chrome。

Answer 10

我在表格单元格中有选择，以下代码为我做了诀窍：

.myClass{
   width: 100%;//most of browsers
   _width: auto;//ie6 hack
}

干杯

Answer 11

此处描述的最佳解决方案：http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

在IE中裁剪HTML选择选项宽度。有解决方案吗

11 个答案: