IE下DropDownList 固定width,options 宽度无法自适应的问题

我们知道在IE浏览器下面,如果对DripDownList设定一个固定的宽度,如果options里项的内容很长的话,IE是无法自适应宽度的,下拉菜单里只能看到被截断的字符串,下图就是在IE里的效果。

在Firefox、Chrome等浏览器里,options可以自适应宽度,效果如下图所示,用户可以看到全部的内容,很人性化。IE从6到8,竟然没有任何改善,狠狠的鄙视把IE。

在某些情况下,要求下拉框的宽度不能调长,但是选择的时候又要能看到全部内容,要实现就会比较麻烦。可能有些人会通过TextBox加Div层,来模拟实现下拉框的功能,这应该是个没有办法的办法,但是实现起来还是比较麻烦很有点难度的。

我想了个折中的方法,时下拉框在选择的时候能看到全部内容。就是在用户焦点移到下拉框的时候给DropDownList的样式设成自适应,用户选择后,离开下拉框的时候,再把原来的固定宽度赋给DropDownList,使其恢复原来的宽度。

这种方法只是临时的拉宽宽度,用户选择后,不会影响整体的页面布局。

代码(jQuery的写法):

  $(document).ready(function() {
	var widthvalue;
	if (jQuery.browser.msie) {
		$("#FeeTypeFooter").focus(function() {
			widthvalue = $(this).css("width");
			$(this).css("width", "auto");
		}).blur(function() {
			$(this).css("width", widthvalue);
		});
	}
});

效果(临时自适应宽度只需对IE浏览器做支持就可以了,下面演示程序的DropDownList去掉了IE的限制):

各位还有什么好方法?

原创文章,转载请注明: 转载自闲云博客

本文链接地址: IE下DropDownList 固定width,options 宽度无法自适应的问题

10 response to "IE下DropDownList 固定width,options 宽度无法自适应的问题"

  1. By: wangwenhao Posted: 2010/07/29

    这样的DropdownList放在GridView里的话,GridView会不会被撑大啊?

    [回复该评论]

    jianyun 回复:

    有时会撑开的,但撑开应该也就选择的时候,是临时性的,所以不算完美的方案啊。
    不过我测试的时候GridView撑大后,没有出现水平滚动条。

    [回复该评论]

  2. By: 吴毅杰 Posted: 2010/07/30

    看一下你jQuery代码的排版,我的浏览器中显示到右面去了,挫了

    [回复该评论]

    jianyun 回复:

    你用的哪个浏览器啊?

    [回复该评论]

    吴毅杰 回复:

    IE8,非常不喜欢可编辑的GridView,样式难看,而且数据操作也不方便

    [回复该评论]

  3. By: pell grants Posted: 2010/11/11

    Thanks for some quality points there. I am kind of new to online , so I printed this off to put in my file, any better way to go about keeping track of it then printing?

    [回复该评论]

  4. By: jianyun Posted: 2010/11/17

    最新的IE9浏览器里,Option已经可以自适应宽度了,看来,微软已经意识到这个细节方面的问题了

    [回复该评论]

发表评论

电子邮件地址不会被公开。 必填项已用*标注