3

我有一些在 Firefox 17 中可以正常工作的 HTML/CSS，但在升级到 Firefox 18 后，它的行为不再符合我的预期。我不确定我的 CSS 是否做错了（这完全有可能，因为我是新手），或者 Firefox 18 中是否引入了错误。

以下 HTML 文件重现了该问题：

<html><head>
    <title>Transform test</title>

    <style>
        div.overlay {
            background-color: rgba(230, 230, 230, 0.8);
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
        }
        div.overlay.transparent {
            background-color: transparent;
        }
        div.overlayFrame {
            background-color: white;
            border: 1px solid gray;
            overflow: hidden;
            position: absolute;
        }
        div.overlayFrame0 {
            bottom: 50px;
            left: 50px;
            right: 50px;
            top: 50px;
        }
        div.overlayFrame1 {
            bottom: 45px;
            left: 55px;
            right: 45px;
            top: 55px;
        }
    </style>       
</head>

<body>
    <div class="overlay">
        <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame1">
            <div class="overlay transparent">
                <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame0">
                </div>
            </div>
        </div>
    </div>
</body></html>

在 Firefox 17 中，这会产生相互堆叠的 div 偏移 5px，但在 Firefox 18 中，顶部 div 偏移更多。不过，奇怪的是，Firebug 认为放错位置的顶部 div 仍然在正确的位置，因为如果您在其 HTML 树查看器中选择该 div，它会在 Firefox 17 显示它的同一位置为该 div 绘制一个突出显示。

我已经对此进行了调试，直到确定如果我从外部 overlayFrame div 中删除“style”属性，则顶部 overlayFrame div 将显示在“正确”位置。

这是 Firefox 18 中的错误还是我正在做的事情？谢谢。

4

2 回答 2

2

这个问题与定位上下文有关。它似乎是由在 div 中嵌套position: fixeddiv引起的position: absolute，反之亦然。当您这样做并overflow: hidden;设置时，fixeddiv 定位基于整个窗口（理论上应该如此）。但是，当overflow: visible;设置时，它的定位将基于绝对定位的父级。请注意设置溢出值时 Firefox 中的行为如何变化。

解决方案是不要嵌套“纸”背景 div；让第二个跟随第一个并自己放置。示例 [ JSBin ]：

<html><head>
    <title>Transform test</title>

    <style>
        div.overlay {
            background-color: rgba(230, 230, 230, 0.8);
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
        }
        div.overlayFrame {
            background-color: white;
            border: 1px solid gray;
            overflow: hidden;
            position: absolute;
        }
        div.overlayFrame0 {
            bottom: 50px;
            left: 50px;
            right: 50px;
            top: 50px;
        }
        div.overlayFrame1 {
            bottom: 45px;
            left: 55px;
            right: 45px;
            top: 55px;
        }
    </style>       
</head>

<body>
  <div class="overlay"></div>
  <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame1"></div>
  <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame0">
    Paper!
  </div>
</body></html>
于 2013-01-09T19:56:16.437 回答
1

鉴于该测试用例，这很有可能是https://bugzilla.mozilla.org/show_bug.cgi?id=827577。

于 2013-01-10T07:22:37.750 回答