小编典典

选择具有固定宽度的下拉列表,以截取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>

阅读 297

收藏
2020-05-10

共1个答案

小编典典

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

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

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

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

2020-05-10