在IE8中，绝对定位是基于父级的。我似乎无法在FF中使用它。这与人们通常抱怨的问题相反。
有人猜错了吗？
格雷
这是一个示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" language="JavaScript">
function firstChildC(startNode)
{
var nextNode = startNode.firstChild;
while(nextNode.nodeType != 1) //loop until it is an actual tag, not white space
nextNode = nextNode.nextSibling;
return nextNode;
}
var bFirefox = false;
if (navigator.userAgent.indexOf("Firefox") != -1)
bFirefox = true;
function highlightPosition(event)
{
//gets the td that holds the pre tag, which holds the data
var preTag;
if(bFirefox)
preTag = event.target;
else
preTag = event.srcElement;
var containerOfPreTag = preTag.parentNode;
var lineCountTD = firstChildC(containerOfPreTag.parentNode);
var numLines = parseInt(lineCountTD.innerHTML);
var lineHeight = preTag.offsetHeight/numLines;
//find line to highlight
var currentLine;
if(bFirefox)
currentLine = parseInt(event.layerY / lineHeight);
else
currentLine = parseInt(event.offsetY / lineHeight);
//highlight line
var highlighterDiv = firstChildC(containerOfPreTag);
highlightLine(highlighterDiv,0,preTag.offsetWidth, (lineHeight*currentLine), lineHeight);
return 0;
}
function highlightLine(highlighterDiv, left, width, top, height)
{
highlighterDiv.style.display = "block";
highlighterDiv.style.left = left+"px";
highlighterDiv.style.width = width+"px";
highlighterDiv.style.top = top+"px";
highlighterDiv.style.height = height+"px";
}
</script>
</head>
<body id="page_body">
<div id="section_content" style="overflow:auto; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="line-height:1.1em">
<tr>
<td style="display:none;">
22
</td>
<td style="width: 0px; vertical-align: top; border: 1px solid red">
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
<div style='text-align: center; display:block;height: 1.1em; width: 1.1em'>
<img style='height: 0.8em; width: 0.8em'/>
</div>
</td>
<td style="font-size:100%;position:relative;">
<div style="height: 1.1em; background-color: #f7fa81; position: absolute; z-index:-1">
</div>
<PRE style="margin: 0px; border: 1px solid #ff0000" onmousemove="highlightPosition(event);">THIS IS PAGE 01. LINE 01.
THIS IS PAGE 01. LINE 02.
THIS IS PAGE 01. LINE 03.
THIS IS PAGE 01. LINE 04.
THIS IS PAGE 01. LINE 05.
THIS IS PAGE 01. LINE 06.
THIS IS PAGE 01. LINE 07.
THIS IS PAGE 01. LINE 08.
THIS IS PAGE 01. LINE 09.
THIS IS PAGE 01. LINE 10.
THIS IS PAGE 01. LINE 11.
THIS IS PAGE 01. LINE 12.
THIS IS PAGE 01. LINE 13.
THIS IS PAGE 01. LINE 14.
THIS IS PAGE 01. LINE 15.
THIS IS PAGE 01. LINE 16.
THIS IS PAGE 01. LINE 17.
THIS IS PAGE 01. LINE 18.
THIS IS PAGE 01. LINE 19.
THIS IS PAGE 01. LINE 20.
THIS IS PAGE 01. LINE 21.
THIS IS PAGE 01. LINE 22.</PRE>
</td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
根据OP的要求懒惰的copypasta：
绝对定位基于偏移父级，而不仅仅是父级。元素e的偏移父级是e的最直接祖先元素，其位置不同于static（默认值）。
我不建议将position: relative应用于表单元格。在表格单元格内使用衬里div，设置如下：
<td>
<div style="position: relative; height: 100%; width: 100%;">...</div>
</td>