如何调整 Internet Explorer 中的下拉列表宽度？-js教程-PHP中文网

如何调整 Internet Explorer 中的下拉列表宽度？

Patricia Arquette

发布： 2024-10-20 15:02:02

原创

1038 人浏览过

How to Adjust Drop-Down List Width in Internet Explorer?

IE 下拉列表宽度控制

问题：

在 Internet Explorer (IE ），下拉列表会继承其父下拉框的宽度，当最长的选项选择器超出下拉框的宽度时，会导致外观笨重。

解决方案：CSS - 和基于 JavaScript 的解决方法

要解决此问题，可以结合使用 CSS 和 jQuery 为下拉框及其选项列表设置不同的宽度：

$(document).ready(function() {
  $('select.wide')
    .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
    .bind('click', function() { $(this).toggleClass('clicked'); })
    .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
    .bind('blur', function() { $(this).removeClass('expand clicked'); });
});

登录后复制

应用以下 CSS：

select {
  width: 150px; /* or desired width */
}
select.expand {
  width: auto;
}

登录后复制

将类“wide”分配给受影响的下拉元素：

<select class="wide">
  ...
</select>

登录后复制

此方法可确保下拉框保留固定宽度，同时允许下拉列表动态扩展，以容纳最长的可用选择器。

以上是如何调整 Internet Explorer 中的下拉列表宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！