选择具有固定宽度的下拉菜单切断 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 要求我们将此下拉菜单调整为 145 像素，并让它承载具有更长描述的项目.
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;
}
(如果选择框是固定宽度的容器的子级，则需要设置位置属性.)
(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屋！
