如何修复FF中的绝对定位？ [英] How to fix Absolute Positioning In FF?
本文介绍了如何修复FF中的绝对定位？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在IE8绝对定位工作是基于父。我似乎不能得到它的工作在FF。这与人们通常抱怨的问题相反。
有没有人猜到什么错了？
Grae
以下是示例：
;！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
< html>
< head>
< script type =text / javascriptlanguage =JavaScript>
function firstChildC（startNode）
{
var nextNode = startNode.firstChild;
while（nextNode.nodeType！= 1）//循环，直到它是一个实际标记，而不是空格
nextNode = nextNode.nextSibling;
return nextNode;
}
var bFirefox = false;
if（navigator.userAgent.indexOf（Firefox）！= -1）
bFirefox = true;
function highlightPosition（event）
{
//获取包含pre标签的td，它保存数据
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;
//找到要突出显示的行
var currentLine;
if（bFirefox）
currentLine = parseInt（event.layerY / lineHeight）;
else
currentLine = parseInt（event.offsetY / lineHeight）;
//突出显示行
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_contentstyle =overflow：auto; width：100％;>
< table border =0cellpadding =0cellspacing =0width =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;显示：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>
&
< 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％ >
< div style =height：1.1em; background-color：＃f7fa81; position：absolute; z-index：-1>
< / div>
< PRE style =margin：0px; border：1px solid＃ff0000onmousemove =highlightPosition（event）;>这是第01页。LINE 01.
这是第01页。LINE 02.
这是第01页。LINE 03.
这是第01页。LINE 04.
这是第01页。LINE 05.
这是第01页。 0b
这是第01页。线07.
这是第01页。线08.
这是第01页。线09.
这是第01页。
这是第01页第11行。
这是第01页第12行。
这是第01页第13行。
这是第01页第14行。
这是第01页第15行。
这是第01页第16行。
这是第01页第17行。
这是第01页第18行。
这是第01页第19行。
这是第01页第20行。
这是第01页第21行。
这是第01页第22行。< / PRE>
< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
解决方案 Lazy copypasta OP：
绝对定位基于偏移父级，而不仅仅是父级。元素 e 的偏移父元素是 e 的最直接的祖先元素，其位置不是 static （默认值）。
c> position：relative 添加到表单元格。使用表格单元格内的 div ，如下所示：
< td>
< div style =position：relative; height：100％; width：100％;> ...< / div>
< / td>
In IE8 absolute positioning works for being based of the parent. I can't seem to get it to work in FF. This is opposite of the problem people normally complain about.
Does anyone have any guess what is wrong?
Grae
Here is a sample:
<!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>
解决方案 Lazy copypasta at request of OP:
Absolute positioning works based on the offset parent, not just the parent. The offset parent of an element e is the most immediate ancestor element of e which has position other than static (the default).
I would not recommend applying position: relative to a table cell. Use a liner div inside of the table cell, set up like this:
<td>
<div style="position: relative; height: 100%; width: 100%;">...</div>
</td>
这篇关于如何修复FF中的绝对定位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
