7

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

有什么办法可以让 IE 的选择行为像非 IE 浏览器那样？

4

11 回答 11

2

这似乎在强制 IE 重新评估选择宽度方面效果很好。适用于 IE7 和 IE8。

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}
于 2010-07-22T18:20:56.117 回答
1

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

  1. 在某些情况下，可能会触发鼠标悬停事件两次，从而导致 origWidth 变量设置为“自动”，从而防止选择恢复为原始大小。

  2. 如果下拉列表中的文本值不需要额外的空间，则选择实际上会缩小，这看起来很奇怪。

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

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 中测试

于 2010-05-18T16:25:38.443 回答
1

CSS：

.set_width { width:120px; }

html:

<select class="set_width"><option>one</option><option>two</option></select>
于 2009-06-19T12:16:36.900 回答
1

I placed in a table cell, just trying to keep the same width with the cell.

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

btw, thanks for all the posts, it helps me a lot.

于 2012-01-05T10:56:04.473 回答
0

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

于 2010-01-07T14:46:17.900 回答
0

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

<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 条件注释中定义一个函数并调用它。

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

于 2010-02-17T00:27:20.677 回答
0

我在表格单元格中有选择，下面的代码对我有用：

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

干杯

于 2011-08-31T07:48:43.693 回答
0

我有一个适合我的解决方案，所以我想我会继续发布它（底部有一些警告）。我敢肯定，这不是 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 就会触发（这意味着您可以尝试选择一个选项，但它们会在您单击之前消失）。
  • 相反，在鼠标悬停时，焦点设置为确保正确触发模糊事件。
于 2010-01-21T18:31:00.657 回答
0

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

于 2012-10-23T15:19:08.717 回答
0

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

<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>
于 2009-12-18T05:36:43.793 回答
0 
for (i=1;i<=5;i++){
       idname = "Usert" + i;
       document.getElementById(idname).style.width = "100%";

}

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

它适用于 IE6、Firefox 和 Chrome。

于 2011-05-04T01:41:23.950 回答