为什么固定宽度选择下拉菜单会截断 Internet Explorer 中的内容，以及如何修复它？

在 IE 中选择固定宽度的下拉菜单截断内容

问题描述：

何时使用具有固定宽度的选择下拉菜单，某些项目可能具有超过指定宽度的文本，从而导致Internet Explorer (IE) 浏览器中的截断。在 IE6 和 IE7 中，下拉列表被限制为指定的宽度，导致无法查看较长项目的完整内容。

CSS 和 HTML：

The提供的 CSS 和 HTML 代码演示了问题：

select.center_pull {
    width: 145px;
}

<select>

解决方案：

IE 8 及以上版本：

适用于 IE 8 及更高版本，一个简单的基于 CSS 的解决方案解决了问题：

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

此规则调整下拉列表的宽度，以在下拉列表聚焦时容纳最长的项目。

IE 7 及以下版本：

不幸的是，IE 7及以下版本不支持:focus选择器，因此需要额外的技术来解决截断：

• JavaScript：使用JavaScript动态计算最长项目的宽度并相应地设置下拉列表的宽度。
• CSS Hacks : 使用 CSS hacks 强制 IE 具有更宽的下拉列表，例如为 IE 应用 width: auto 规则并具有更高的优先级特别是浏览器。

以上是为什么固定宽度选择下拉菜单会截断 Internet Explorer 中的内容，以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！