html - style - overflow-y not working




CSS overflow-x: visible; et overflow-y: caché; causant le problème de barre de (4)

Supposons que vous ayez du style et le balisage:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}
<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Quand vous voyez ceci. Le <ul> a une barre de défilement en bas même si j'ai spécifié des valeurs visibles et cachées pour le débordement x / y.

(observé sur Chrome 11 et l'opéra (?))

J'imagine qu'il doit y avoir une spécification w3c ou quelque chose qui dit que cela arrive mais pour la vie de moi je ne peux pas comprendre pourquoi.

JSFiddle

MISE À JOUR: - J'ai trouvé un moyen d'obtenir le même résultat en ajoutant un autre élément enroulé autour du ul . Vérifiez-le.


Après quelques recherches sérieuses, il semble que j'ai trouvé la réponse à ma question:

de: http://www.brunildo.org/test/Overflowxy2.html

Dans Gecko, Safari, Opera, 'visible' devient 'auto' aussi lorsqu'il est combiné avec 'caché' (en d'autres termes: 'visible' devient 'auto' lorsqu'il est combiné avec autre chose que 'visible'). Gecko 1.8, Safari 3, Opera 9.5 sont assez constants parmi eux.

aussi la spécification W3C dit:

Les valeurs calculées de 'overflow-x' et 'overflow-y' sont les mêmes que leurs valeurs spécifiées, sauf que certaines combinaisons avec 'visible' ne sont pas possibles: si l'une est spécifiée comme 'visible' et l'autre 'scroll' ou 'auto', alors 'visible' est réglé sur 'auto'. La valeur calculée de 'overflow' est égale à la valeur calculée de 'overflow-x' si 'overflow-y' est la même chose; sinon c'est la paire de valeurs calculées de 'overflow-x' et 'overflow-y'.

Version courte:

Si vous utilisez visible pour overflow-x ou overflow-y et autre chose que visible pour l'autre, la valeur visible est interprétée comme auto .


J'ai d'abord trouvé un moyen CSS de contourner cela lors de l'utilisation du plugin Cycle jQuery. Cycle utilise JavaScript pour définir mon diapositive à overflow: hidden , donc lors de la définition de mes images à la width: 100% les images semblaient coupées verticalement, et donc je les ai forcées à être visibles avec et pour éviter de montrer l'animation des diapositives case I set overflow: hidden au conteneur div de la diapositive. J'espère que ça marche pour toi.

MISE À JOUR - Nouvelle solution:

Problème original -> http://jsfiddle.net/xMddf/1/ (Même si j'utilise overflow-y: visible il devient "auto" et en fait "scroll".)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

La nouvelle solution -> http://jsfiddle.net/xMddf/2/ (J'ai trouvé une solution de contournement utilisant un div wrapper pour appliquer overflow-x et overflow-y à différents éléments DOM comme l'a conseillé sur le problème de la combinaison visible et hidden à un seul élément DOM.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

J'ai utilisé l'approche content+wrapper ... mais j'ai fait quelque chose de différent de ce qui a été mentionné jusqu'ici: je m'assurais que les limites de mon wrapper ne s'alignaient pas avec les limites du contenu dans la direction que je voulais voir .

Important: Il était assez facile d'obtenir l'approche content+wrapper, same-bounds pour travailler sur un navigateur ou un autre en fonction de diverses combinaisons de position CSS, de overflow-* , etc ... mais je n'ai jamais pu utiliser cette approche pour obtenir tout est correct (Edge, Chrome, Safari, ...).

Mais quand j'avais quelque chose comme:

  <div id    = "hack_wrapper" // created solely for this purpose
       style = "position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id    = "content_wrapper"
           style = "position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... tous les navigateurs étaient heureux.


un autre bidouillage bon marché, qui semble faire l'affaire:

style="padding-bottom: 250px; margin-bottom: -250px;" sur l'élément où le débordement vertical est coupé, avec 250 pixels représentant autant de pixels que nécessaire pour votre liste déroulante, etc.





css