Fatal编程技术网
  • css/
  • Css 为什么Firefox18使用-moz转换呈现元素与Firefox17不同？

Css 为什么Firefox18使用-moz转换呈现元素与Firefox17不同？

css firefox

Css 为什么Firefox18使用-moz转换呈现元素与Firefox17不同？,css,firefox,css-transforms,Css,Firefox,Css Transforms,我有一些HTML/CSS可以在Firefox17中正常工作，但升级到Firefox18后，它就不再像我预期的那样工作了。我不确定我的CSS是否做错了什么（这是完全可能的，因为我是新手），或者Firefox18中是否引入了一个bug 以下HTML文件复制了该问题： <html><head> <title>Transform test</title> <style> div.overlay {

我有一些HTML/CSS可以在Firefox17中正常工作，但升级到Firefox18后，它就不再像我预期的那样工作了。我不确定我的CSS是否做错了什么（这是完全可能的，因为我是新手），或者Firefox18中是否引入了一个bug

以下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>



变换测试
分区覆盖{
背景色：rgba（230,230,230,0.8）；
底部：0；
左：0；
位置：固定；
右：0；
排名：0；
}
div.overlay.transparent{
背景色：透明；
}
分区覆盖框架{
背景色：白色；
边框：1px纯色灰色；
溢出：隐藏；
位置：绝对位置；
}
div.overlayFrame0{
底部：50px；
左：50px；
右：50px；
顶部：50px；
}
分区覆盖框架1{
底部：45px；
左：55px；
右：45px；
顶部：55px；
}

在Firefox 17中，这会产生叠加在彼此顶部的div偏移5px，但在Firefox 18中，顶部div偏移更多。奇怪的是，Firebug认为放错位置的top div仍然在正确的位置，因为如果在HTML树查看器中选择该div，它会在Firefox 17显示该div的同一位置为该div绘制高亮显示

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

这是Firefox18中的bug还是我正在做的事情中的bug？谢谢。

这个问题与定位上下文有关。这似乎是由于将
position:fixed
div嵌套在具有
position:absolute
的div中，反之亦然。执行此操作时，
溢出：隐藏，则固定的div定位基于整个窗口（理论上应该是这样的）。但是，当
溢出时：可见”，则其定位将基于绝对定位的父级。注意当设置溢出值时，Firefox中的行为是如何变化的

解决方案是不嵌套“纸”背景div；让第二个跟在第一个后面，两个都自己放。示例[]：



变换测试
分区覆盖{
背景色：rgba（230,230,230,0.8）；
底部：0；
左：0；
位置：固定；
右：0；
排名：0；
}
分区覆盖框架{
背景色：白色；
边框：1px纯色灰色；
溢出：隐藏；
位置：绝对位置；
}
div.overlayFrame0{
底部：50px；
左：50px；
右：50px；
顶部：50px；
}
分区覆盖框架1{
底部：45px；
左：55px；
右：45px；
顶部：55px；
}
纸张

这个测试用例很有可能是这样的。
听起来有点合理，但是如果我从外部覆盖框架中删除-moz转换，为什么它会“修复”呢？我想我不明白你所说的与-moz转换有什么关系？我还应该补充一点，我最初试图做一些类似于你为我的覆盖层建议的事情，但最终遇到了一个不同的问题。这些覆盖用于创建一种堆叠上下文。当我像你建议的那样分别处理它们时，我遇到了一个问题，即它们不再处于正确的z顺序堆叠上下文中（显然，透明度在创建堆叠上下文中起着作用，并且我的覆盖层不是完全不透明的）。为了解决这个问题，我将覆盖层移到更靠近我正在“覆盖”的元素的位置。我的例子显然简化了。是的，这似乎确实相关。谢谢你指出这一点。

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