欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

style.position: absolute在谷歌浏览器和ie上不同

更新时间: 2014-01-05 01:57:29 责任编辑: Author_N1

 

style.position: absolute在谷歌浏览器和IE下不同
<input type="text" /> 套在一个 div 里,设置 style.position: absolute
在IE下,这个文本框是相对于所在的div的绝对位置,但是在其它浏览器下,却是相对于浏览器窗口的绝对位置
如何达到的我目的?


<html>
<head>
<script type="text/javascript">
var currentTd = null;
function focusTd(td){
var txt = document.getElementById("txt1");

txt.style.width = td.offsetWidth-1;
txt.style.height = td.offsetHeight-1;
txt.style.left = td.offsetLeft;
txt.style.top = td.offsetTop;
txt.style.display = "block"
txt.value = td.innerText;
txt.focus();
txt.select();

currentTd = td;
}
function leave(){
var txt = document.getElementById("txt1");
if(currentTd != null){
currentTd.innerText = txt.value;
currentTd = null;
}
txt.style.display = "none";
}
</script>
</head>
<body>
  <div id="divTest" style="width:300px; height:200px; border-style:solid; overflow-x : auto; overflow-y : auto; border-width:1px; border-color:black; background-color: pink; z-index:2">
<table border='1' width="400px" bordercolor="black" style="border-collapse:collapse">
<tr>
<th style="width:200px">aaaaa</th><th style="width:200px">bbbbb</th><th>ccccc</th><th>DDD</th><th>EEE</th>
</tr>
<tr>
<td style="width:60px" onclick="focusTd(this)">A1</td>
<td style="width:60px" onclick="focusTd(this)">B1</td>
<td style="width:60px" onclick="focusTd(this)">C1</td>
<td style="width:60px" onclick="focusTd(this)">D1</td>
<td onclick="focusTd(this)">E1</td>
</tr>
<tr>
<td style="width:60px" onclick="focusTd(this)">A2</td>
<td style="width:60px" onclick="focusTd(this)">B2</td>
<td style="width:60px" onclick="focusTd(this)">C2</td>
<td style="width:60px" onclick="focusTd(this)">D2</td>
<td onclick="focusTd(this)">E2</td>
</tr>
<tr>
<td style="width:60px" onclick="focusTd(this)">A3</td>
<td style="width:60px" onclick="focusTd(this)">B3</td>
<td style="width:60px" onclick="focusTd(this)">C3</td>
<td style="width:60px" onclick="focusTd(this)">D3</td>
<td onclick="focusTd(this)">E3</td>
</tr>
<tr>
<td style="width:60px" onclick="focusTd(this)">A4</td>
<td style="width:60px" onclick="focusTd(this)">B4</td>
<td style="width:60px" onclick="focusTd(this)">C4</td>
<td style="width:60px" onclick="focusTd(this)">D4</td>
<td onclick="focusTd(this)">E4</td>
</tr>
</table>
<input type="text" id="txt1" style="position: absolute; left: 2; top: 0; border-width:0; border-style:solid; border-color: black; z-index:1; display:none" onblur="leave()" />
  </div>
</body>
</html>

--参考方法--
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:57:29
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/3661/
本文WWW.DOC100.NET DOC100.NET版权所有。