如何修复FF中的绝对定位？答案

【问题标题】：How to fix Absolute Positioning In FF?如何修复FF中的绝对定位？
【发布时间】：2010-12-16 23:39:59
【问题描述】：

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

【问题讨论】：

一些源代码和/或现场示例可能会有所帮助。
绝对定位基于offset parent，而不仅仅是parent。元素e 的偏移父元素是e 的最直接祖先元素，其位置不是static（默认值）。
@Matt 相对定位的 TD 元素怎么样？这就是我想要使用的。
我不建议将position: relative 应用于表格单元格。在表格单元格内使用衬垫 div，设置如下：<td><div style="position: relative; height: 100%; width: 100%;">...</div></td>
您应该真正使用外部 CSS 文件并使用类，而不是内联定义样式。您将拥有更简洁、更快的代码。

标签： css internet-explorer firefox

【解决方案1】：

应 OP 的要求延迟复制粘贴：

绝对定位基于偏移父项，而不仅仅是父项。元素e 的偏移父元素是e 的最直接祖先元素，其位置不是static（默认值）。

我不建议将position: relative 应用于表格单元格。在表格单元格内使用衬垫div，设置如下：

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

【讨论】：

【解决方案2】：

给父元素position: relative。

【讨论】：

@Grae：在您的示例中给出 section_content position: relative ，它将起作用。 jsfiddle.net/FWNUR
我觉得你的建议和Matt的基本一样
啊，好吧，我没注意到...你可以在移动的 div 中添加 margin-left。
@Grae：是的，但我更快:)

【解决方案3】：

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

IE 总是出错，但显示正常。

【讨论】：

嵌套的 div 是正确的。马特实际上在他之前的评论中说了答案，所以我认为他应该得到支票。