style.position: absolute在谷歌浏览器和IE上不同-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20863 次

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>

<

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>