aaa*_*dre 55 html css internet-explorer html-select
问题:
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>
<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>
小智 29
对于IE 8,有一个简单的纯css解决方案:
select:focus {
width: auto;
position: relative;
}
(如果selectbox是具有固定宽度的容器的子项,则需要设置position属性.)
不幸的是IE 7及更少不支持:焦点选择器.
小智 10
关于这个问题我做了Google,但没有找到任何最佳解决方案,所以创建了一个适用于所有浏览器的解决方案.
只需在页面加载时调用badFixSelectBoxDataWidthIE()函数.
function badFixSelectBoxDataWidthIE(){
if ($.browser.msie){
$('select').each(function(){
if($(this).attr('multiple')== false){
$(this)
.mousedown(function(){
if($(this).css("width") != "auto") {
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width) {
$(this).unbind('mousedown');
$(this).css("width", $(this).data("origWidth"));
}
}
})
/* Handle blur if the user does not change the value */
.blur(function(){
$(this).css("width", $(this).data("origWidth"));
})
/* Handle change of the user does change the value */
.change(function(){
$(this).css("width", $(this).data("origWidth"));
});
}
});
}
}
这是一个应该帮助你的小脚本:
http://www.icant.co.uk/forreview/tamingselect/
小智 7
对于一个简单的无Javascript解决方案,根据您的要求,为您的<option>添加title属性可能就足够了.
<option value="242" title="Very long and extensively descriptive text">
Very long and extensively descriptive text
</option>
无论<select>的宽度如何,这都将在悬停<option>时以工具提示的方式显示截止文本.
适用于IE7 +.
| 归档时间： |
|
| 查看次数： |
177555 次 |
| 最近记录： |