web-dev-qa-db-fra.com

Débordement: la superposition ne fonctionne pas dans Firefox

Sur mon site Web, je dois utiliser la propriété css overflow: overlay pour un <div>.

Cependant, il ne s'affiche pas dans le navigateur et une inspection du CSS dans Firebug montre qu'il n'est même pas là, mais c'est comme cela fonctionne dans Chrome. Je n'ai pas testé safari.

Que dois-je changer pour obtenir le overflow: overlay La propriété CSS fonctionne?

Merci

cssfirefoxcross-browserpropertiesoverflow
39
H Bellamy

Les valeurs possibles pour le débordement sont:

visible
hidden
auto
scroll

Voir ici ou ici pour une discussion de ceux-ci.

L'utilisation de toute autre valeur dans différents navigateurs donnera des résultats imprévisibles car ils gèrent différemment la valeur incorrecte.

Edit : Suite au commentaire, j'ai réussi à trouver la mention de overflow: overlay ici .

la superposition est décrite comme:

Le contenu est découpé et des barres de défilement sont ajoutées si nécessaire.

Surtout, il est également dit que cela ne fonctionne que dans Safari ou Chrome (c'est-à-dire WebKit).

Cet article sur WebKit bugzilla suggère qu'il n'est pas long pour ce monde en tout cas:

WebKit a actuellement une valeur de débordement CSS propriétaire appelée "overlay" qui n'est pas documentée et, pour autant que je puisse en juger par la lecture du code, fonctionne exactement comme "auto".

Nous devons soit le supprimer, soit le renommer en "-webkit-overlay".

Mise à jour mars 2016

Ressemble à overflow: overlay n'est pas parti. Il y a des signes que cela fonctionne bien dans les normes.

La différence entre overlay et auto résiderait seulement dans le fait que les barres de défilement apparaissent en haut du contenu de la page et ne lui font pas prendre d'espace de mise en page.

Voir ici pour la discussion .

46
Jon Egerton

overflow: overlay ne fonctionne pas dans Firefox mais vous pouvez superposer pour Chrome et n'ajoute pas de marge ou de remplissage supplémentaire pour Firefox. Il n'est pas toujours parfaitement aligné pour Firefox mais c'est mieux que rien.

Vous pouvez supprimer le style inutile pour Firefox avec ce code:

@-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