偶尔在Firefox中不正确的DIV位置

Question

我有一个HTML页面，其中包含以下布局：

绿色方块是<div>，它在实际应用程序中保存数据网格。 <div> 有一个绝对的位置。有时，Firefox会在错误的位置显示<div>（它的位置正确但位置错误）：

在其他情况下，<div>出现在适当的位置。我可以在我的Linux和Windows安装中仅在Firefox中重现此错误（在Chrome，Opera和IE中没有问题）。 我也只能在通过Internet访问页面时重现它（当应用程序部署到localhost Web服务器时无法重现。）

该页面是一个JSP页面，当服务器繁忙且速度很慢时，问题最常出现。当我从浏览器保存页面，然后再次打开文件时，绿色<div>移回正常位置。我认为这个问题与HTTP响应的时间有关。

该页面不使用JavaScript。它有一个链接的CSS文件。以下是我的代码的相关部分：

HTML

<div class="b-panels">

    <!-- This is the left (blue) sidebar of the page. -->
    <div class="b-left-panel"></div>

    <!-- This is the center (white) area of the page. -->
    <div class="b-center-panel">

        <!-- This is the green <div>! -->
        <div class="dataGrid"> ... </div>

    </div>

    <!-- This is the right sidebar. It's not in the pictures. -->
    <div class="b-right-panel"></div>
</div>

CSS

.b-panels {
    position: relative;
    width: 100%;
    display: table;
}

.b-left-panel {
    display: table-cell;
    width: 190px;
}

.b-center-panel {
    position: relative;
    display: table-cell;
    width: auto;
}

.b-right-panel {
    display: table-cell;
    width: 140px;
}

/* This is the green <div>! */ 
.b-center-panel .dataGrid {
    position: absolute;
    left: 20;
    top: 20;
}

我该如何解决问题？

Answer 1

试试这个：

在css之后给出绿色div的父div 风格= “位置：相对于”

通过赋予此样式，您的绿色div将相对于父div获取位置。

Answer 2

<强>更新

我找到了更好的解决方案。用另外一个<div>包裹绿色<div>解决了问题：

<div class="wrapper">

    <!-- This is the green <div>! -->
    <div class="dataGrid"> ... </div>

</div>

.wrapper {
    position: relative;
    width: 100%;
}

OLD SOLUTION：

我必须使用JavaScript / jQuery来解决问题。我使用了以下代码：

$(document).ready(function() {

    // if the browser is Firefox
    if (!(window.mozInnerScreenX == null)) {

        // get the position of the parent
        var panelLeftPos = $("#dataGrid").parent().position().left;

        // set the position of the green tag
        $("#dataGrid").css({top: 20, left: panelLeftPos + 20, position:'absolute'});
    }
});