选择具有固定宽度的下拉列表，以截取IE中的内容

一尘不染

选择具有固定宽度的下拉列表，以截取IE中的内容

html

问题：

选择项中的某些项需要大于指定的145px宽度才能完整显示。

Firefox行为 ：单击选择将显示下拉列表，将其调整为最长元素的宽度。

IE6和IE7行为 ：单击选择将显示下拉元素列表，其宽度限制为145px，从而无法读取较长的元素。

当前的用户界面要求我们将下拉菜单设置为145px，并让其托管带有较长说明的项目。

有关解决IE问题的任何建议？

即使展开列表，顶部元素也应保持145px宽。

谢谢！

CSS：

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

这是选择输入代码（目前尚无backend_dropbox样式的定义）

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

完整的html页面，以备您在浏览器中快速测试时使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>

阅读 263

2020-05-10

共1个答案

一尘不染

对于IE 8，有一个简单的基于CSS的简单解决方案：

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

（如果选择框是具有固定宽度的容器的子级，则需要设置position属性。）

不幸的是，IE 7及更低版本不支持：focus选择器。

2020-05-10