Question

如何在下拉菜单展开时显示一个选项的所有内容？例如，如果下拉列表中的选项是整个句子并且选择标记宽度很小，则IE中的用户将无法读取整个选项。在Mozilla中不是这种情况，其中在下拉展开时显示整个内容。

有没有办法在IE8中避免这种行为，

由于

Answer 1

关于IE，这是一个不幸的事情。在this question中有一个JQuery / CSS示例很好地涵盖了一个相当简单的解决方案。

Answer 2

我在对抗IE8和哦如此着名的下拉列表截断时有类似的约束。我的页面上有多个下拉列表，一个接一个，一些在顶部导航内容中，IE8决定切断我的属性选项文本属性。现在，和我们许多人一样，我不想将宽度设置得过于模糊，所以这个选项是不可能的。

经过大量的研究，我找不到一个好的答案，所以我继续用jQuery和CSS修复它：

首先，让我们确保我们只在IE8中传递我们的函数：

    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
       //fix me code
    }

然后，为了允许select在内容区域之外扩展，让我们用正确的结构包装div中的下拉列表，如果还没有，然后调用辅助函数：

        var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
        $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');

        //helper function for fix
        ddlFix();
    }

现在进入活动。由于IE8因为任何原因而在聚焦后抛出一个事件，因此在尝试扩展时，IE将在渲染后关闭窗口小部件。解决方法是绑定'focusin'和'focusout'一个将根据最长选项文本自动扩展的类。然后，为了确保不缩小超过默认值的恒定最小宽度，我们可以获得当前选择列表宽度，并将其设置为'onchange'上的下拉列表min-width属性绑定：

    function ddlFix() {
    var minWidth;

    $('select')

    .each(function () {
        minWidth = $(this).width();
        $(this).css('min-width', minWidth);
    })
    .bind('focusin', function () {
        $(this).addClass('expand');
    })
    .change(function () {
        $(this).css('width', minWidth);
    })
    .bind('focusout', function () {
        $(this).removeClass('expand');
    });
}

最后，请务必在样式表中添加此类：

 select:focus, select.expand {
    width: auto;
}

在IE8中下拉输入

2 个答案: