问题:
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样式的定义)
完整的html页面,以防您想在浏览器中快速测试:
dropdown test Select width test
小智.. 29
对于IE 8,有一个简单的纯css解决方案:
select:focus {
width: auto;
position: relative;
}
(如果selectbox是具有固定宽度的容器的子项,则需要设置position属性.)
不幸的是IE 7及更少不支持:焦点选择器.
对于IE 8,有一个简单的纯css解决方案:
select:focus {
width: auto;
position: relative;
}
(如果selectbox是具有固定宽度的容器的子项,则需要设置position属性.)
不幸的是IE 7及更少不支持:焦点选择器.
关于这个问题我做了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/
对于一个简单的无Javascript解决方案,根据您的要求,为您的
无论
适用于IE7 +.
京公网安备 11010802040832号 | 京ICP备19059560号-6 