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>
------解决方案--------------------
没人啊，自己顶一下
[解决办法]
div加上position: absolute;
[解决办法]
我没看出你的目的阿
div加上position: static;
[解决办法]
我的目的，是希望鼠标在表格上点击时，相应的格子出现文本框，并且文本框里的内容就是格子内部的内容
效果象 office excel 那样
[解决办法]
自己 up 一下
[解决办法]
var currentTd = null;
function focusTd(td){
var txt = document.getElementById("txt1");
td.appendChild(txt);
txt.style.width = td.offsetWidth-1;
txt.style.height = td.offsetHeight-1;
txt.value = td.innerText;
txt.focus();
txt.select();
currentTd = td;
}
[解决办法]
最开始我也是按照这个思路做的，但是把 textbox 放到 td 之后，有时会把 td 撑得很宽，都不知道什么原因
[解决办法]
自己 up