firefox中boundingWidth以及boundingHeight的获取

          这几天在做兼容，所以遇到的怪问题比较多，记录一下。

           boundingWidth以及boundingHeight是结合createTextRange来进行使用的。

例如:

在这里我们希望得到Input里面value的宽度和高度。在IE里面就可以使用boundingWidth以及boundingHeight直接得到。

但是这两个方法只有IE支持，在firefox中我们可以采用下面这种折中的办法来进行解决。

	var inputId = elem.attributes["id"].nodeValue;		//input的id
	var parentDiv = $('<div></div>');					//创建div
	parentDiv.attr('id','parentId');					//设置id
	parentDiv.appendTo('body');					//将div加入页面
	parentDiv.css("display","inline-block").hide();
	var a = $("#"+inputId).val();
	$("#parentId").html(a);			//将输入框的内容加入div
	var r,x,y,l,t,w,h;
	
	if(navigator.userAgent.indexOf("MSIE")<=0){
		x = event.layerX;				//鼠标当前坐标
//		y = event.layerY;
//		l = $("#"+inputId).offset().left;
//		t = $("#"+inputId).offset().top;
		w = $("#parentId").width();
//		h = $("#parentId").height();
//		w = $("#"+id)[0].offsetWidth;
//		h =	$("#"+id)[0].offsetHeight;
//		w = $("#"+id).width();			//input的宽度
//		h = $("#"+id).height();			//input的高度
		if(x>w){
			return false;
		}else{
			return true;
		}
	}else{
		r = elem.createTextRange();
		x = event.offsetX;				//鼠标当前坐标
		y = event.offsetY;
		l = r.offsetLeft;
		t = r.offsetTop;
		w = r.boundingWidth;
		h = r.boundingHeight;
	}
	var c =x >= l && x < l + w && y >= t && y < t + h;
	return  c;

我们可以先获取到input的value，然后定义一个div,将value放入其中，然后得到div的宽度和高度，经过检测，支持firefox和google。

  如果你有更好的办法，请分享一下，非常感谢！