3

我正在建立一个网站，我想让标题处于固定位置。

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

这是一个现场示例（仅适用于 Firefox）

这是一个与 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：如果您想编辑我的帖子，欢迎您，因为英语不是我的第一语言。

4

2 回答 2

4

尝试移动

-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有关比例示例，请参见此 Fiddle ：http: //jsfiddle.net/XtsRH/2/

更新：

关于>（子）选择器：

*只是通用选择器，它匹配任何元素类型的名称。

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

于 2012-11-20T17:54:24.773 回答
2

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

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

请参阅移动浏览器中的固定定位

于 2012-11-20T15:45:27.903 回答