CSS overflow-x : visible ; et overflow-y : caché ; l’origine de problème de scrollbar

Question

Supposons que vous ayez un balisage:

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

Et est a le style suivant:

ul
{
    white-space: nowrap;
    overflow-x: visible;
    overflow-y: hidden;
}
li
{
    display: inline-block;
}

Lorsque vous affichez cette. L' <ul> a une barre de défilement en bas, même si j'ai spécifié visibles et cachés des valeurs de dépassement de x/y.

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

Je devine qu'il doit y avoir quelques w3c spec ou quelque chose de le dire à arriver, mais pour la vie de moi je ne peux pas savoir pourquoi.

JSFiddle

Mise à JOUR:- j'ai trouvé un moyen d'obtenir le même résultat en ajoutant un autre élément enroulé autour de l' ul. Check it out.

Answer 1

Après un certain sérieux de la recherche, 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", également lorsqu'il est combiné avec ‘caché' (en d'autres termes: ‘visible' devient "auto", lorsqu'il est combiné avec autre chose différent de ‘visible'). Gecko 1.8, Safari 3, Opéra 9.5 sont assez cohérents entre eux.

aussi le W3C spec dit:

Les valeurs calculées de ‘overflow-x' et "overflow-y' sont les mêmes que les leurs les valeurs spécifiées, sauf que certaines des combinaisons avec "visibles" ne sont pas possible: si l'on a spécifié que ‘visible' et l'autre est de défilement ou ‘auto', ‘visible' a la valeur "auto". La valeur calculée de ‘débordement' est égale à la calculés la valeur de ‘overflow-x' si ‘overflow-y' est le même, sinon c'est la paire des valeurs calculées de "overflow-x' et ‘overflow-y".

Version Courte:

Si vous utilisez visible soit overflow-x ou overflow-y et quelque chose d'autre que visible pour les autres. L' visible de la valeur est interprétée comme auto.

Answer 2

J'ai trouvé un moyen de contourner ce quand vous utilisez le plugin jquery Cycle. Cycle fixe thru javascript ma diapositive à débordement:caché, donc lors de la configuration de mes photos de width:100% les photos look à la verticale coupe, j'ai donc forcé à être visible avec "!important" et pour éviter l'affichage de la diapositive d'animation hors de la boîte, j'ai mis overflow:hidden pour le div conteneur de la diapositive. Espérons que cela fonctionne pour vous.

Mise à JOUR:

problème d'origine -> http://jsfiddle.net/xMddf/1/ (même si j'utilise overflow-y: visible, il devient "auto" et "scroll" )

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

résolu -> http://jsfiddle.net/xMddf/2/ (Je fais une solution de contournement à l'aide d'un wrapper div appliquer overflow-x et overflow-y dans les différentes éléments du DOM comme James Khoury conseils sur le problème en combinant visibles et cachés sur un même élément du DOM)

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

}