web-dev-qa-db-ja.com

オーバーフロー：オーバーレイはFirefoxで機能しません

私のウェブサイトでは、overflow: overlayにcssプロパティ<div>を使用する必要があります。

ただし、ブラウザでレンダリングされておらず、firebugのcssを調べると、そこにさえないことがわかりますが、Chromeで動作しているようです。私はサファリを試していません。

overflow: overlay cssプロパティを機能させるには何を変更する必要がありますか？

ありがとう

cssfirefoxcross-browserpropertiesoverflow
39
H Bellamy

オーバーフローの可能な値は次のとおりです。

visible
hidden
auto
scroll

これらの説明については、 here または here を参照してください。

異なるブラウザーで他の値を使用すると、誤った値を異なる方法で処理するため、予測できない結果が生じます。

Edit：コメントに続いて、overflow：overlay here の言及を見つけることができました。

オーバーレイは次のように記述されます：

コンテンツはクリップされ、必要に応じてスクロールバーが追加されます。

重要なのは、SafariまたはChrome（つまりWebKit）でのみ動作するということです。

このアイテム WebKit bugzillaでは、いずれにせよ、この世界では長くないことを示唆しています：

現在、WebKitには「overlay」と呼ばれる独自のCSSオーバーフロー値がありますが、これは文書化されておらず、コードを読んでわかる限り、「auto」とまったく同じように機能します。

削除するか、名前を「-webkit-overlay」に変更する必要があります。

2016年3月更新

overflow: overlayは消えていません。規格に沿った方法で機能している兆候があります。

overlayとautoの違いは、スクロールバーがページコンテンツの上部に表示されるだけで、レイアウトスペースが使用されないことです。

議論のためにここに を見てください。

46
Jon Egerton

overflow: overlayはFirefoxでは機能しませんが、Chromeにオーバーレイできます。Firefoxに余白や余白を追加することはありません。Firefoxには常に完全に整合するとは限りませんが、何もないよりはましです。

このコードでFirefoxの無駄なスタイルを削除できます：

@-moz-document url-prefix() {
    .scrollable-nav {
        padding-right: 0px !important;
    }
}

    .scrollable-nav {
        padding-right: 14px;
        max-height: 100px;
        overflow-x: hidden;
        overflow: overlay;
        
        text-align:right;
        width:100px;
    }
    
    @-moz-document url-prefix() {
        .scrollable-nav {
            padding-right: 0px !important;
        }
    }
<ul class="scrollable-nav">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
<ul class="scrollable-nav">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
0
Karima Rafes