由於-moz-transform：scale（1）;僅在Firefox中，「position：fixed」出現css問題。

Question

我建立一個網站，我想有固定位置的頭。

我已經這樣做了幾個網站，但它不會在Firefox上運行。 Safari和Chrome都可以。

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

Here is a live example which works with firefox

唯一的區別是在CSS：

​​3210

似乎-moz變換 「刪除」 的固定位置。

你能解釋我爲什麼？

我使用-moz-變換：因爲我的客戶希望有一個變焦按鈕。我已經解釋說這不是一件好事，但他仍然希望這種功能。

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

嘗試從#conteneur移動

​​3210

部分#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/

更新：

關於>（子）選擇：

• Stack Overflow question (CSS Child vs Descendant selectors)

*僅僅是universal selector，任何元素類型的名稱相匹配。

我已經分叉的小提琴（修改大規模使用jQuery）：http://jsfiddle.net/AgCSx/。 jQuery選擇器從#conteneur更改爲#conteneur > *

Answer 2

最近我發現，它描述了同樣的問題與任何變換容器應用註釋，這意味着改造打破了固定的作用。這裏是註釋的提取物...

「比其用於製作兩個堆疊上下文和包含塊的變換結果‘無’之外的任何值。對象充當固定定位後代包含塊。」（http://www.w3.org/TR/css3-2d-transforms/）

參見Fixed Positioning in Mobile Browsers