IE8 中的下拉列表使用 <select> 截断选项文本 [重复]答案

【问题标题】：Drop-down list in IE8 using <select> truncates option text [duplicate]IE8 中的下拉列表使用 <select> 截断选项文本 [重复]
【发布时间】：2011-06-18 00:39:22
【问题描述】：

可能重复：
fix size drop down with long text in options (restricted view in IE)

下拉列表在 IE8 上无法正常工作。带有长文本的选项会被截断。 Firefox 和 Chrome 工作正常，并根据最长选项的文本调整列表窗口。

以下 HTML 是一个示例：

<html>
<body>
      <select STYLE="width: 150px" onchange="javascript:window.open(this.value)">
        <option value="week1.html">option 1</option>
        <option value="week2.html">many characters are here in option 2</option>
        <option value="week3.html">option 3</option>
      </select>
    </form>

  </body>

</html>

Another thread in StackOverflow suggests 使用基于 css 的解决方案：

select:focus {
    width: auto;
    position: relative;
}

但是我不明白如何在我的 HTML 中使用这些选项。这是正确的方法吗？如果是这样，我应该如何使用它？任何其他想法让 IE8 中的下拉列表像在 Firefox 中一样动态调整大小？

谢谢。

【问题讨论】：

需要在select上指定宽度吗？这可以解释为什么它被截断

标签： html internet-explorer-8 drop-down-menu

【解决方案1】：

IE8 不支持 :focus css 选择器。有关浏览器支持的 CSS 功能的综合列表，请参阅以下链接。

http://www.quirksmode.org/css/contents.html

最好的办法是使用 jQuery 或其他复制缺失功能的 js 框架。

【讨论】：