遇到个很奇怪的问题，求指点。

是这样的，我要做个点击输入框弹出一个层的效果。代码如下:
///////////////////////////////////////////////////////
<!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>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
<!--
*{ padding:0; margin:0; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
#box{ margin:50px auto 0 auto; width:300px; height:200px; background-color:#CCC; text-align:center; padding-top:100px;}
#myChoose{ position:absolute; border:#FFF 1px solid;}
-->
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#myChoose").hide();
$(document).mousedown(
function(event){
if(event.target.id.indexOf('my')!=-1){
showDiv();
}
else
{
$("#myChoose").hide();
}
}
);
});
function showDiv()
{
var inputObj = document.getElementById("myInput");
var inputJx = inputObj.getBoundingClientRect().left + 'px';
var inputJy = inputObj.getBoundingClientRect().top + inputObj.getBoundingClientRect().height + 1 + 'px';
var inputWidth = inputObj.getBoundingClientRect().width - 1 + 'px';
$("#myChoose").css("top", inputJy);
$("#myChoose").css("left", inputJx);
$("#myChoose").css("width", inputWidth);
$("#myChoose").show();
alert("top:"+inputJy);
alert("left:"+inputJx);
alert("width:"+inputWidth);
}
-->
</script>
</head><body>
<div id="box">
<input id="myInput" type="text" value="" />
<div id="myChoose">
显示
</div>
</div>
</body>
</html>
///////////////////////////////////////////////////////
火狐和Chrome下及DW5下调试均正常但是在IE8下就取不到top  和width这是什么原因呢？
求指点！

解决方案 »

  1.   

    先别急着开骂，getBoundingClientRect本就是IE先提出来的，后来才被其他浏览器采用。
    ------------------------------
    var inputJy = inputObj.getBoundingClientRect().top + inputObj.getBoundingClientRect().height + 1 + 'px';
    var inputWidth = inputObj.getBoundingClientRect().width - 1 + 'px';
    -------------------------
    IE下，试试把红字改为  bottom、right
      

  2.   

    别客气。
    至于为什么，很简单啊，IE不支持.height、.width
    它原本就是取ClientRect的四个角的坐标，所以只支持上下左右---top,bottom,left,right
    后来其他浏览器吸收并改进了，变成上左宽高