在IE8中，绝对定位适用于基于父级的。我似乎无法让它在FF工作。这与人们通常抱怨的问题相反。
有没有人猜到出了什么问题？
GRAE
以下是一个示例：
<!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>
答案 0 :(得分：2)
懒惰的copypasta：
绝对定位基于偏移父级而不仅仅是父级。元素e的偏移父元素是e的最直接的祖先元素，其位置不是static（默认值）。
我不建议将position: relative应用于表格单元格。在表格单元格内使用衬里div，设置如下：
<td>
<div style="position: relative; height: 100%; width: 100%;">...</div>
</td>
答案 1 :(得分：1)
给出父元素position: relative。
答案 2 :(得分：1)
位置相对在td上无法正常工作，因为td是一个类似块的元素，并且已经相对于它周围的内容（其他tds）定位。而是在td中嵌入另一个div并使div成为亲戚，而不是用它来将你的绝对内容放在里面。
IE总是在这里错了，显示确定。