Overflow: superposition ne fonctionne pas dans firefox

Sur mon site, j'ai besoin d'utiliser la propriété css overflow: overlay pour un <div>.

Cependant, il n'est pas rendu dans le navigateur et que l'inspection de la css dans firebug montre qu'il n'est même pas là, mais il est tel qu'il fonctionne dans Chrome. Je havn'pas testé safari.

Que dois-je changer pour obtenir le overflow: overlay propriété css de travail?

Grâce

  • Voulez-vous dire overflow:visible?
InformationsquelleAutor H Bellamy | 2011-12-17
  1. 46

    Valeurs possibles pour le débordement sont: 

    visible
hidden
auto
scroll

    Voir ici ou ici pour une discussion de ces.

    Tout autre valeur dans les différents navigateurs vont produire des résultats imprévisibles comme ils gèrent la valeur incorrecte différemment.

    Modifier: Suite aux commentaires, j'ai réussi à trouver la mention de dépassement de capacité:superposition ici.

    superposition est décrit comme:

    Contenu est coupé et les barres de défilement sont ajoutés si nécessaire.

    Importante de son a également déclaré qu'à travailler dans Safari ou Chrome (WebKit et ie).

    Cet élément sur WebKit bugzilla suggèrent qu'il n'est pas long pour ce monde en tout cas:

    WebKit a actuellement une propriété CSS overflow valeur appelée "superposition", qui est sans-papiers et pour autant que je peux dire à partir de la lecture du code fonctionne exactement comme "auto".

    On devrait le supprimer ou le renommer en "-webkit-overlay".

    Mise À Jour: Mars 2016

    Ressemble overflow: overlay n'a pas disparu. Il y a des signes de travailler son chemin dans les normes.

    La différence entre overlay et auto ne serait que les barres de défilement apparaît sur le dessus du contenu de la page, et de ne pas causer de prendre aménagement de l'espace.

    Voir ici pour la discussion.

    • Overlay fonctionne de la même Auto. (les barres de défilement sont ajoutés si nécessaire)
    • Il y a une différence, cependant: Avec auto, la barre de défilement est ajouté en dessous de l'élément x à débordement. Avec overlay, il est ajouté à l'intérieur de l'élément! Cela signifie qu'aucune autre écran de domaine est pris, mais le texte à l'intérieur de l'élément lui-même est obstrué par la barre de défilement. C'est subtil, mais utile différence. Testé sur Chrome.
    • "overflow: superposition" n'est pas la même chose que "overflow : auto". Dans le cas où vous le style de la barre de défilement en lui donnant une certaine largeur, alors ces deux propriétés ont des effets différents. En cas de superposition, la barre de défilement ne poussez pas le contenu de toute façon comme il flotte au-dessus du contenu et n'est pas dans la normale de la circulation des documents. Mais dans le cas de "overflow: auto", la barre de défilement occupe une certaine largeur (comme spécifié par vous-même), et pousse le contenu comme toute intrusion élément.
    InformationsquelleAutor Jon Egerton
  2. 0

    overflow: overlay ne fonctionne pas dans Firefox, mais vous pouvez superposer pour Chrome et ne pas ajouter de la marging ou de rembourrage pour Firefox. Il n'est pas toujours parfaitement aligner pour Firefox, mais c'est mieux que rien.

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

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

    CSS:

        .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;
        }
    }

    HTML:

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

    InformationsquelleAutor Karima Rafes