放下IE8中的输入
放下IE8中的输入
提问于 2011-02-28 15:53:45
如何使下拉列表在展开时显示一个选项的所有内容？如果下拉列表中的选项是，例如，整个句子和选择的标签宽度都很小，则IE中的用户将无法读取整个选项。在Mozilla中，情况并非如此，在展开下拉时，会显示整个内容。
在IE8中有什么方法可以避免这种行为，
谢谢
回答 1
Stack Overflow用户
发布于 2012-09-20 19:54:54
我有一个类似的约束，当我工作时，对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'绑定上的下拉列表最小宽度属性：
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5144226
复制相关文章
相似问题
腾讯云开发者
