我有一些 HTML/CSS 在 Firefox 17 中可以正常工作，但在升级到 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 中的错误还是我正在做的事情？谢谢。
最佳答案
这个问题与定位上下文有关。这似乎是由于在具有 position: absolute 的 div 中嵌套了一个 position: fixed 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>
关于css - 为什么 Firefox 18 使用 -moz-transform 渲染元素的方式与 Firefox 17 不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14244164/