在IE中,下拉列表与dropbox的宽度相同(我希望我有意义),而在Firefox中,下拉列表的宽度根据内容而有所不同.
这基本上意味着我必须确保Dropbox足够宽以显示尽可能长的选择.这使我的页面看起来很难看:(
这个问题有解决方法吗？如何使用CSS为dropbox和下拉列表设置不同的宽度？
问题:
select中的某些项目需要超过145px的指定宽度才能完全显示.
Firefox行为:单击选择会显示调整为最长元素宽度的下拉元素列表.
IE6和IE7行为:单击选择会显示下拉元素列表限制为145px宽度,因此无法读取更长的元素.
当前的UI要求我们在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> …也许这是一个简单的问题,也许不是.我有一个选择框,我用宽度硬编码.说120px.
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>我希望能够显示第二个选项,以便用户可以看到文本的全长.
像其他一切一样.这在Firefox中运行良好,但不适用于Internet Explorer6.