Question

使用固定宽度选择标记时，IE中有一个错误。当select标签中的选项内容超过其隐藏的select标签的宽度时。它在火狐中工作得很好，而不是在IE中。

alt text http://img691.imageshack.us/img691/4530/dropdown.gif

Answer 1

这是IE中的一个错误，除了使选择框更宽外，没有办法解决它：

<select style="width: 500px;">
  <option value="1">
    This is a very long option, but it's cool, cause the select is also very long
  </option>
</select>

另一种方法是使用一个框架，用一个其他元素的样式组合替换selectbox。它们的行为类似于选择框，但需要使用javascript才能运行。

Answer 2

我提出的解决方案（我在谷歌搜索中找不到任何地方）非常简单：当用户点击选择列表时，将类换成没有宽度限制的类。当他们进行选择时，将类重新交换为WITH宽度限制。

使用jquery启动示例。

$(function() {

$(".SecuritySelect")

    .mouseover(function(){
        $(this)
            .data("origWidth", $(this).css("width"))
            .css("width", "auto");
    })

    .mouseout(function(){
        $(this).css("width", $(this).data("origWidth"));
    });

});

Answer 3

列出的解决方案很差。我找到并使用的是

$('select#CourtId')
    .focus(function() { $('select#CourtId').css('position', 'relative').css('margin-right', '-300px').css('min-width', $('select#CourtId').css('width')).css('width', 'auto'); })
    .blur(function() { $('select#CourtId').removeAttr('style'); });

Answer 4

github上有一个项目作为jQuery插件： http://css-tricks.com/select-cuts-off-options-in-ie-fix/

只需将其用作：


$(document).ready(function () {
    //all select lists expand to full width when selected
    $("select").ieExpandSelectWidth();
});

Answer 5

我从未尝试过这个，但您可以尝试设置输入字段

position: absolute

，例如

width: 500

onFocus ，并将其重新设置为正常 onBlur 。你可能需要稍微修改你的布局，这样它就不会摇晃，但我想不出为什么这不起作用。

Answer 6

Hedgerwow对此问题有一个很好的解决方案：

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/bk/demo.php

它出现在一个非常光滑的DHTML菜单中，但它非常干净。扎实的修复。

如何在选择列表中显示扩展选项？

6 个答案: