Css 如何在FF中确定绝对定位？_Css_Internet Explorer_Firefox

Css 如何在FF中确定绝对定位？

css internet-explorer firefox

Css 如何在FF中确定绝对定位？,css,internet-explorer,firefox,Css,Internet Explorer,Firefox,在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

在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>


函数firstChildC（startNode）
{
var nextNode=startNode.firstChild；
while（nextNode.nodeType！=1）//循环直到它是实际的标记，而不是空白
nextNode=nextNode.nextSibling；
返回下一个节点；
}
var bFirefox=假；
if（navigator.userAgent.indexOf（“Firefox”）！=-1）
bFirefox=true；
功能高亮位置（事件）
{
//获取保存pre标记的td，该标记保存数据
var preTag；
如果（bFirefox）
preTag=event.target；
其他的
preTag=event.src元素；
var containerOfPreTag=preTag.parentNode；
var lineCountTD=firstChildC（containerOfPreTag.parentNode）；
var numLines=parseInt（lineCountTD.innerHTML）；
var lineHeight=预标记。偏移视线/多行线；
//查找要突出显示的行
无功电流线；
如果（bFirefox）
currentLine=parseInt（event.layerY/lineHeight）；
其他的
currentLine=parseInt（event.offsetY/lineHeight）；
//突出线
var highlighterDiv=第一个Childc（容器FPRETAG）；
highlightLine（highlighterDiv，0，preTag.offsetWidth，（线宽*当前线），线宽）；
返回0；
}
功能highlightLine（highlighterDiv、左、宽、顶、高）
{
highlighterDiv.style.display=“block”；
highlighterDiv.style.left=左+像素；
highlighterDiv.style.width=宽度+像素；
highlighterDiv.style.top=top+px；
highlighterDiv.style.height=高度+px；
}
22
这是第01页。第01行。
这是第01页。第02行。
这是第01页。第03行。
这是第01页。第04行。
这是第01页。第05行。
这是第01页。第06行。
这是第01页。第07行。
这是第01页。第08行。
这是第01页。第09行。
这是第01页。第10行。
这是第01页。第11行。
这是第01页。第12行。
这是第01页。第13行。
这是第01页。第14行。
这是第01页。第15行。
这是第01页。第16行。
这是第01页。第17行。
这是第01页。第18行。
这是第01页。第19行。
这是第01页。第20行。
这是第01页。第21行。
这是第01页。第22行。

给定父元素

位置：相对

给定父元素

位置：相对

相对位置在td上无法正常工作，因为td是一个类似块的元素，并且已经相对于其周围的内容（其他tds）进行了定位。宁可在td中嵌套另一个div，并使该div成为相对div，而不要使用它来定位您的绝对内容

IE总是在这里出错，尽管显示正常。

根据OP的要求：

绝对定位基于偏移父项而不仅仅是父项。元素

的偏移父元素是

的最直接祖先元素，其位置不是

静态

（默认值）

我不建议对表格单元格应用

position:relative

。在表格单元格内部使用liner

div

，设置如下：

<td>
    <div style="position: relative; height: 100%; width: 100%;">...</div>
</td>

...

应OP的要求：

绝对定位基于偏移父项而不仅仅是父项。元素

的偏移父元素是

的最直接祖先元素，其位置不是

静态

（默认值）

我和