Question

我有一些在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中的错误还是我正在做的事情？感谢。

Answer 1

此问题与定位上下文有关。它似乎是由于在position: fixed的div中嵌套position: absolute div而引起的，反之亦然。执行此操作并设置overflow: hidden;时，fixed div定位基于整个窗口（理论上应该如此）。但是，设置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>

Answer 2

考虑到测试用例，这很可能是https://bugzilla.mozilla.org/show_bug.cgi?id=827577。

为什么Firefox 18使用-moz-transform渲染元素的方式与Firefox 17不同？

2 个答案: