Question

我正在建立一个网站，我希望将标题置于固定位置。

我已经在几个网站上完成了这个，但它在Firefox上不起作用。野生动物园和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：如果你想编辑我的帖子，欢迎你，因为英语不是我的第一语言。

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

Answer 2

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

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

请参阅Fixed Positioning in Mobile Browsers

由于-moz-transform：scale（1），因此仅在Firefox中使用“position：fixed”的css问题;

2 个答案: