选择具有固定宽度的下拉菜单，在IE中切断内容 [英] Select dropdown with fixed width cutting off content in IE
问题描述
问题：
为了完全显示，选择中的某些项目需要超过指定的145px宽度。
Some of the items in the select require more than the specified width of 145px in order to display fully.
Firefox的行为：点击选择，显示调整为最长元素宽度的下拉列表元素。
Firefox behavior: clicking on the select reveals the dropdown elements list adjusted to the width of the longest element.
IE6& IE7行为：点击选择会显示下拉列表元素列表限制为145px宽，这使得无法读取更长的元素。
IE6 & IE7 behavior: clicking on the select reveals the dropdown elements list restricted to 145px width making it impossible to read the longer elements.
当前的UI要求我们适合这个下拉在145px，并让它托管项目更长的描述。
The current UI requires us to fit this dropdown in 145px and have it host items with longer descriptions.
有关解决IE问题的任何建议吗？
Any advise on resolving the issue with IE?
顶部元素应保持145px宽，即使列表
The top element should remain 145px wide even when the list is expanded.
谢谢！
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输入代码（目前没有backend_dropbox样式的定义） ）
Here's the select input code (there's no definition for the backend_dropbox style at this time)
<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页面，以便在浏览器中快速测试：
Full html page in case you want to quickly test in a browser:
<!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解决方案：
For IE 8 there is a simple pure css-based solution:
select:focus {
width: auto;
position: relative;
}
（您需要设置position属性，如果selectbox是child
(You need to set the position property, if the selectbox is child of a container with fixed width.)
不幸的是IE 7及以下版本不支持：focus选择器。
Unfortunately IE 7 and less do not support the :focus selector.
这篇关于选择具有固定宽度的下拉菜单，在IE中切断内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
