在 IE 中选择选项被截断的解决方法

我认为问题很明显。 如果你在 <select> 元素上设置了一个静态宽度，而 <option> 中文本的宽度比该宽度更宽，那么在 IE 6-8 中文本就会被截断。 我找不到任何好的纯 CSS 解决方案。 它已经通过 JavaScript 使用多种方法解决了。

• Yahoo! 在他们的库中有一个修复方法。 但我已经在使用 jQuery，不想添加很多我不需要的大部分库。
• 有一个使用 通过 CSS 行为表达式应用的 JavaScript 的解决方案。 但那些让我很害怕，当我尝试这样做时，我发现了一些重大问题（整个页面都不想加载）。
• 你可以使用一些 在点击时改变宽度的内联 JavaScript。 这更接近我想要的，但当然内联 JavaScript 通常不是好消息。

我做了什么

我决定最好的方法是默认情况下保持选择元素的静态宽度，但在 IE 中鼠标悬停时，将宽度更改为“auto”以适应。 当然，当用户“完成”时，将其恢复为静态宽度。 以下是如何使用 jQuery 实现它：

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

用通俗的话说

1. 记住选择框的原始宽度。
2. 当鼠标光标移至选择框元素上时，将 width 设置为 auto，使其根据需要展开。
3. 当字段发生更改或失去焦点时，将宽度恢复为原始宽度。

当然，只有 IE 8 及更低版本需要此修复方法（该错误已在 IE 9 中修复），因此我通过 IE 条件注释 应用脚本。

<!--[if lt IE 9]>
<script>
   // the fix
</script>
<![endif]-->

查看演示   下载文件

GitHub 上的项目

2012 年 8 月更新：GitHub 上还有一个专门针对此修复方法的项目，名为 IE 8 展开选择宽度。