css - スライダーの背景の絶対位置 - Firefox エラー

Question

レストラン用の小さなウェブサイトを開発しているときに、Firefox でのポジショニングに関するこの奇妙な問題に出くわしました - IE と Chrome は問題なく動作します。

スライダーは次のように配置されます。

#new-royalslider-1{
position: absolute;
top: 0;
left: 0;
z-index: -1

非常に単純ですが、Firefox の動作が異なる理由を理解できる人はいますか?

score 1 · Accepted Answer

まず、スライダーを相対的に配置し、ヘッダーラッパーを内部に配置する必要があると思います。絶対位置付け。

それをしたくない場合はposition: relative、スライダーを使用して、ヘッダーラッパーを使用して次のことができます

position: absolute;
top: 0;

score 0 · Accepted Answer

どうやら.headerセレクターに混乱があるようです。デバッグモードで 2 回表示され、Firefox で使用されているものとまったく同じではありません。

Firefox では、このルールのチェックを外すと問題が解決します。

.header {
    ...
    ...
    border-bottom: medium none;
}

何らかの理由で、クロムは言及されていませんmedium。お役に立てれば

score 0 · Accepted Answer

すべてのブラウザが Web サイトを同じように表示するわけではなく、全体が統一される傾向にあるとしても、いずれかによって誤解される詳細な点がまだいくつかあります。

問題は、Firefox、Opera、および Safari には、Internet Explorer のように、特定のコメントを含む個別のスタイルシートを割り当てる方法がないことです。

おそらく、ブラウザをターゲットにすることで問題が解決するでしょう。次のコードを追加します。

@-moz-document url-prefix()
{
    #new-royalslider-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

score 0 · Accepted Answer

理由はわかりませんが、html が切り捨てられているようです。だから、私は火事でした: html{float: left}. それが役に立てば幸い。

score 0 · Accepted Answer

ID #header-wrapper position absoluteを次のように定義します

#header-wrapper{position:absolute;top:0;}

あなたのID を次のように定義します#wrapper margin-top: 450px;

#wrapper {
    margin-top: 450px;
}

5 に答える 5