3

Webサイトを構築していますが、ヘッダーを固定位置にしたいです。

私はすでにいくつかのウェブサイトでそれを行っていますが、Firefoxでは機能しません。サファリとクロームで大丈夫です。

これが実際の例です（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スケールの例については、次のフィドルを参照してください：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 に答える