DIV avec max-height et overflow-y provoque IE11 pour activer la fenêtre de défilement verticale-bar — pourquoi?
Comme il serait difficile d'inclure tout le code ici, il y a une brève description du problème (et certains conçue extraits plus tard): il y a cet élément DIV avec un display none qui popups par l'affichage de réglage à bloc (sur certains événement onclick --- comme un menu). Le contenu de cette DIV est plus grandes que l'ensemble de la page, lorsque la DIV.style.affichage == bloc, navigateur ajoute verticale de la barre de défilement à sa fenêtre --- et c'est très bien. Eh bien, j'ai décidé de mettre le max-height et overflow-y sur ce DIV, mais tu DIV a une belle verticale de la barre de défilement sur son propre (il fonctionne comme prévu), navigateur --- spécifiquement IE11 --- ajoute encore la verticale de la barre de défilement de la fenêtre, comme dans le cas précédent. Vous pouvez l'utiliser pour faire défiler toute la page, mais ne semble pas avoir de point (il n'y a pas de contenu sur le bas de la fenêtre pour faire défiler).
Voici à quoi il ressemble (plus ou moins) dans le code. CSS d'abord:
div.mydiv {
display: none;
position: absolute;
border-width: 1px 0px 0px 0px;
border-color: #BBBBBB black black black;
border-style: solid solid solid solid;
border-radius: 0px 0px 5px 5px;
background-color: white;
padding: 4px;
line-height: 11px;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
opacity: 1;
left: -6px;
top: 12px;
cursor: default;
box-shadow: 1px 1px 3px #888888, -1px 1px 2px #EEEEEE;
z-index: 1600;
}Maintenant le HTML:
<div class="mydiv" style="overflow-y: scroll; max-height: 300px;">...</div>Dans FireFox, il fonctionne comme prévu, c'est à dire DIV obtient son verticale de la barre de défilement si max-hauteur de cette DIV excès 300px et navigateur ne pas ajouter verticale de la barre de défilement de la fenêtre. Dans IE11 DIV obtient également sa barre de défilement, mais fait aussi de la fenêtre du navigateur (seulement si la DIV est visible, c'est à dire div.style.affichage == bloc). Toutes les idées sur la façon de se débarrasser de ce navigateur ce comportement?
Mise à JOUR: voici violon à démontrer — s'il vous plaît noter la verticale de la barre de défilement dans le Résultat image qui apparaît lorsque la liste est affichée.
En effet, il semble fonctionner - - - - - cela doit être quelque chose de plus profond alors. Je vais essayer de préparer minimal de cas qui illustre le problème. Je vous remercie pour vos efforts!
Je viens d'ajouter le lien à un violon démontrant comportement décrit (voir lien au bas de l'original de la question).
Je suis tombé sur une variante de ce problème où une combinaison de
max-height: 100px et overflow-y: auto déclenché le vidé (rendu OK à débordement, ou pas, le contenu) du conteneur rendu avec une très grande hauteur. Il fixe à l'aide de overflow-y: scroll. Notez que les éléments enfants sont display: block.
OriginalL'auteur Cromax | 2014-02-05
Vous devez vous connecter pour publier un commentaire.
J'ai corrigé en supprimant le display:inline contre la div.sélectionner une boîte-> div sélecteur. Voici la nouveau violon.
OriginalL'auteur graham mendick
J'en ai discuté avec l'un de nos développeurs qui travaillent sur CSS sous IE. Ce ne semble pas être un bug dans IE11, que nous sommes en train de réfléchir.
<img/>de votre test ce problème n'apparaît pas. Je me demande pourquoi... (Merci pour la poursuite de ce thread).J'ai une réduction de la repro ici. C'est quelque chose à voir avec le mixage des éléments inline. Je vais mettre à jour ici si j'ai quelque chose à partager à partir de notre enquête. Peut-être vous pouvez trouver un moyen de le contourner.
OriginalL'auteur adrianba
Vous pouvez utiliser inline-block à la place inline dans div.sélectionnez-box {}, avec cela, vous obtenez le même résultat visuel sans le unnecesary de défilement
OriginalL'auteur CodeMaxter