由于 -moz-transform: scale(1)，仅在 Firefox 中出现“位置：已修复”的 CSS 问题；答案

【问题标题】：css issue with "position: fixed" only in Firefox due to -moz-transform: scale(1);由于 -moz-transform: scale(1)，仅在 Firefox 中出现“位置：已修复”的 CSS 问题；
【发布时间】：2012-11-08 17:14:29
【问题描述】：

我正在建立一个网站，我想将标题放在固定位置。

我已经在几个网站上这样做了，但它在 Firefox 上不起作用。 Safari 和 Chrome 都可以。

Here is a live example (doesn't work only with firefox)

Here is a live example which works with firefox

唯一的区别在于css：

-moz-transform: scale(1); 
-moz-transform-origin: 0 0;

似乎 -moz-transform “移除”了固定位置。

你能解释一下为什么吗？

我正在使用 -moz-transform: 因为我的客户想要一个缩放按钮。我已经解释过这不是一件好事，但他仍然想要这个功能。

CSS 代码：

#conteneur
{
width: 960px;
position: relative;
margin: auto;
zoom: 100%;
-moz-transform: scale(1); 
-moz-transform-origin: 0 0;
}

#header
{
position:fixed;
top:0;
z-index:3;
width:960px;
height:81px;
background-color:#ccc;
padding-bottom:8px;
}

ps：如果您想编辑我的帖子，欢迎您，因为英语不是我的第一语言。

【问题讨论】：

尝试将比例从#conteneur移动到#conteneur > div
我不太明白。你可以说得更详细点吗？但是你是对的，例如，如果我将 -moz-transform 移动到正文，则标题处于固定位置。我不确定缩放结果在身体上是否良好，但这是一个开始。另外，你可以发布答案而不是评论，所以如果答案是好的，我可以投票给你。

标签： html css firefox css-position fixed

【解决方案1】：

尝试移动

-moz-transform: scale(1); 
-moz-transform-origin: 0 0;

从#conteneur 到#conteneur > div 的一部分。

所以而不是：

#conteneur {
    width: 960px;
    position: relative;
    margin: auto;
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

试试

#conteneur {
    width: 960px;
    position: relative;
    margin: auto;
}

#conteneur > div {  
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

请参阅此小提琴以获取 0.4 比例示例：http://jsfiddle.net/XtsRH/2/

更新：

关于>（子）选择器：

* 就是universal selector，它匹配任何元素类型的名称。

我已经分叉了你的小提琴（用 jQuery 修改比例）：http://jsfiddle.net/AgCSx/。 jQuery 选择器从#conteneur 更改为#conteneur > *

【讨论】：

真的很有趣。我从未见过这种css代码：#conteneur > * 这是什么意思？此外，我注意到，如果我添加一个缩放按钮并且如果我用 jquery 修改比例，则标题不再处于固定位置。请参阅此小提琴示例：jsfiddle.net/Vinyl/cxT4m
完美！您的解决方案很明确。我会投票给你的答案。如果你愿意，你也可以检查这个小提琴，看看我想做什么：jsfiddle.net/Vinyl/RdYNt 我添加了一个 div 和一个绝对位置的按钮，当单击缩放按钮时我仍然遇到问题。使用具有绝对位置和固定位置的比例并不容易。

【解决方案2】：

最近我发现一条评论描述了应用了任何转换的容器的相同问题，这意味着转换破坏了固定效果。这是评论的摘录...

“除了‘none’之外的任何转换值都会导致创建堆叠上下文和包含块。该对象充当固定位置后代的包含块。” (http://www.w3.org/TR/css3-2d-transforms/)

见Fixed Positioning in Mobile Browsers

【讨论】：