解决IE浏览器select宽度固定问题 by JQuery

在IE6和IE7浏览器下,如果设置了select的宽度,而option比设置的这个宽度要宽,则有一部分会被挡住.
这个issue只在IE6和IE7下存在,其他浏览器都没有这个问题.

在网上看了几个解决办法,但都有些小bug,所以自己用JQuery解决了这个问题.

function select_fix_ie(el) {
	var isOpen = $(el).data("isOpen");
	if (isOpen != null) {
		return;
	}

	$(el).mousedown(function() {
				var isOpen = $(this).data("isOpen");
				if (isOpen) {
					return;
				}
				$(this).data("isOpen", true);

				var clone_selection = $(this).data("clone");
				if (clone_selection == null) {
					clone_selection = $("<div></div>").get(0);
					$(clone_selection).insertAfter(this);
					$(clone_selection).css("display", "block");
					$(clone_selection).css("width", $(this).css("width"));
					$(clone_selection).css("height", "20px");
					$(clone_selection).css("position", $(this).css("position"));
					$(clone_selection).css("z-index", $(this).css("z-index"));
					$(this).data("clone", clone_selection);
				}

				$(clone_selection).show();
				$(clone_selection).css("visibility", "hidden");

				var position = $(this).position();
				var oldWidth = $(this).width();
				$(this).css("width", "auto");
				var newWidth = $(this).width();
				if (oldWidth >= newWidth) {
					$(this).css("width", $(clone_selection).css("width"));
				}
				$(this).css("top", position.top + "px");
				$(this).css("left", position.left + "px");
				$(this).css("position", "absolute");
				$(this).css("z-index", "1000");
			}).blur(function() {
				select_fix_ie_close(this);
			}).change(function() {
				select_fix_ie_close(this);
			})

	$(el).data("isOpen", false);
}

function select_fix_ie_close(el) {
	var isOpen = $(el).data("isOpen");
	if (isOpen) {
		var clone_selection = $(el).data("clone");
		$(clone_selection).css("display", "none");
		$(el).css("position", "");
		$(el).css("width", $(clone_selection).css("width"));
		$(el).css("top", "");
		$(el).css("left", "");
		$(el).css("z-index", $(clone_selection).css("z-index"));
		$(el).data("isOpen", false);
	}
}

可以在附件里面下载使用的例子