问题:
选择项中的某些项需要大于指定的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>
对于IE 8,有一个简单的基于CSS的简单解决方案:
select:focus { width: auto; position: relative; }
(如果选择框是具有固定宽度的容器的子级,则需要设置position属性。)
不幸的是,IE 7及更低版本不支持:focus选择器。