问题:
选择中的某些元素需要超过 145px 的指定宽度才能完全显示。
Firefox 行为:点击选择显示下拉元素列表调整为最长元素的宽度。
IE6 和 IE7 行为:点击选择显示下拉元素列表限制为 145 像素宽度，因此无法阅读较长的元素。
当前的 UI 要求我们在 145 像素内适应这个下拉菜单，并让它承载具有更长描述的元素。
关于解决 IE 问题的任何建议？
即使展开列表，顶部元素也应保持 145 像素宽。
谢谢!
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;
}
这里是select input的代码(此时还没有定义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>
最佳答案
对于 IE 8，有一个简单的纯基于 css 的解决方案:
select:focus {
width: auto;
position: relative;
}
(如果选择框是固定宽度的容器的子项，则需要设置位置属性。)
很遗憾，IE 7 及更低版本不支持 :focus 选择器。
关于html - 在 IE 中选择具有固定宽度截断内容的下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/682764/